CSS3和GIF加載圈

Question

可能重複：
CSS3 Continous Rotate Animation (Just like a loading sundial)

我有這個簡單的GIF負載循環。有沒有可能像這樣的東西可以用CSS3編碼？任何幫助深表感謝。

jsFiddle

Answer 1

HTML：

<div class="arc-hider"></div> 

CSS：

@-webkit-keyframes rotate { 
    from { -webkit-transform: rotate(0deg) } 
    to { -webkit-transform: rotate(360deg) } 
} 
@-moz-keyframes rotate { 
    from { -moz-transform: rotate(0deg) } 
    to { -moz-transform: rotate(360deg) } 
} 
@-o-keyframes rotate { 
    from { -o-transform: rotate(0deg) } 
    to { -o-transform: rotate(180deg) } 
} 
@-ms-keyframes rotate { 
    from { -ms-transform: rotate(0deg) } 
    to { -ms-transform: rotate(360deg) } 
} 
.arc-hider { 
    width: 30px; 
    height: 30px; 
    border-radius: 60px; 
    border: 6px solid #36669F; 
    position: absolute; 
    left: 45%; 
    z-index: 5; 
    clip: rect(0px 21px 21px 0px); 
    -webkit-animation: rotate 2s linear infinite 0s;-moz-animation: rotate 2s linear infinite 0s;-o-animation: rotate 2s linear infinite 0s;-ms-animation: rotate 2s linear infinite 0s; 
    animation: rotate 2s linear infinite 0s; 
} 
​ 

應該做的伎倆

Live Demo | Source