próbujące odtworzyć gif załadunku w CSS

Question

Próbuję odtworzyć następujące Gif w czystym CSS -

Css tutaj - http://codepen.io/anon/pen/FmCaL - (WebKit/chrom tylko na MO)

Próbuję odtworzyć brakujący fragment koła za pomocą przed & po selektorach psuedo, ale nie mogę uzyskać kątów w prawo.

Czy to możliwe? Czy istnieje lepsze podejście?

---

Dzięki za pomoc do tej pory. Powinienem był sprecyzować, że potrzebuję, aby strzałka była przezroczysta. Nie mogę użyć jednolitego koloru dla brakującej części koła.

Answer 1

Co powiesz na proste zrobienie tego w ten sposób?

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); 
} 

---

Objaśnienie: Co tu robimy używa :after pseudo aby umieścić element absolutną okręgu, używając transform właściwość, aby obrócić trójkąt.

---

Demo 2 (z animacją)

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); } 
} 

---

Moja sugestia: Jak zaktualizowaniu qustion, mówiłeś, że chciał przejrzystego rynny, chciałbym zaproponować wam używać .png obrazu i obracanie zamiast pisać 100 linii CSS i martwić się kompatybilnością z wieloma przeglądarkami. Ewentualnie, ponieważ udostępniłem link w komentarzach, możesz użyć maskowania CSS.

Answer 2

Jeśli nie obchodzi, czy trójkąt jest przezroczysty, mogę zaproponować coś takiego:

DEMO (działa w Chrome i 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); }}