cố gắng để tái tạo một gif tải trong css

Question

Tôi đang cố gắng để tái tạo gif sau trong tinh khiết css -

Css đây - http://codepen.io/anon/pen/FmCaL - (webkit/chrome chỉ ở mo)

Tôi đang cố gắng tạo lại đoạn thiếu của vòng tròn bằng cách sử dụng trước & sau bộ chọn psuedo, nhưng tôi không thể có được góc đúng.

Thậm chí có thể làm được không? Có cách tiếp cận tốt hơn không?

---

Cảm ơn bạn đã trợ giúp cho đến thời điểm này. Tôi nên có quy định rằng tôi cần mũi tên để được minh bạch. Tôi không thể sử dụng màu đồng nhất cho phần thiếu của vòng tròn.

Answer 1

Làm thế nào để làm việc này đơn giản như thế này?

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

---

Giải thích: Những gì chúng ta đang làm gì ở đây đang sử dụng :after giả để xác định vị trí các yếu tố tuyệt đối để các vòng tròn và sử dụng tài sản transform để xoay tam giác.

---

Demo 2 (Với hình ảnh động)

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

---

Đề nghị của tôi: Khi bạn cập nhật qustion của bạn, bạn nói bạn muốn có một rãnh nước trong suốt, tôi sẽ đề nghị bạn sử dụng một hình ảnh .png và xoay nó, thay vì viết 100 dòng CSS và lo lắng về khả năng tương thích của trình duyệt chéo. Ngoài ra, vì tôi đã chia sẻ liên kết trong các nhận xét, bạn có thể sử dụng mặt nạ CSS.

Answer 2

Nếu bạn không quan tâm cho dù tam giác là minh bạch, tôi có thể đề nghị một cái gì đó như thế này:

DEMO (công trình trong chrome và 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); }}