は、CSS

Question

私は純粋なCSSの次のGIFを再作成しようとしている中、ローディングGIFを再作成しようとする（MoのみでのWebKit /クローム）

私は擬似セレクタの後に&の前に、円の欠落した塊を再現しようとしていますが、私は正しい角度を得ることができません。

でも可能ですか？より良いアプローチがありますか？

---

これまでのお役に立てありがとうございます。私は透明にするために矢印が必要であると指定したはずです。私は円の欠けている部分のための無地の色を使用することはできません。

Answer 1

このようにするのはいかがですか？

Demo

div { 
    border: 10px solid #000; 
    height: 50px; 
    width: 50px; 
    border-radius: 50%; 
    position: relative;  
} 

div:after { 
    height: 0; 
    width: 0; 
    display: block; 
    position: absolute; 
    right: -12px; 
    content: " "; 
    border-bottom: 12px solid #fff; 
    border-right: 12px solid transparent; 
    transform: rotate(10deg); 
} 

---

説明：私たちは、円への絶対的な要素を配置する:after擬似を使用して三角形を回転させるようにtransformプロパティを使用している、ここでやっています。

---

（アニメーション付き）Demo 2

div { 
    border: 10px solid #000; 
    height: 50px; 
    width: 50px; 
    border-radius: 50%; 
    position: relative;  
    animation: spin 1s infinite linear; 
} 

div:after { 
    height: 0; 
    width: 0; 
    display: block; 
    position: absolute; 
    right: -12px; 
    content: " "; 
    border-bottom: 12px solid #fff; 
    border-right: 12px solid transparent; 
    transform: rotate(10deg); 
} 

@keyframes spin { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
} 

---

私の提案：あなたのqustionを更新として、あなたは私が.png画像を使用するためにあなたを示唆している、あなたは透明側溝を望んでいたとし、回転それは100行のCSSを書き、ブラウザ間の互換性を心配するのではなく、また、コメント内でリンクを共有しているので、CSSマスキングを使用することもできます。

Answer 2

あなたは三角形を透明にするかどうかを気にしない場合、私はこのような何か提案することができます：角度と現在間違っている正確に何

DEMO（クロームとFirefoxで動作します）

.loading { 
    display: inline-block; 
    margin: 5em; 
    border: 10px solid grey; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    -webkit-animation: spin 1s linear infinite; 
    -moz-animation: spin 1s linear infinite; 
    animation: spin 1s linear infinite;  
} 
.loading:before { 
    content: ''; 
    display: block; 
    border: 13px solid transparent; 
    border-right-color: white; 
    width: 20px; 
    height: 0; 
    border-radius: 50%; 
    margin: -3px 0 0 -13px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(359deg); }} 
@-moz-keyframes spin { 100% { -moz-transform: rotate(359deg); }} 
@keyframes spin { 100% { transform: rotate(359deg); }}