純CSS3實現圓形進度條動畫

悄悄地，GIF 格式的進度條已經愈來愈少，CSS 進度條如雨後春筍般涌現。今天要介紹的這個 CSS3 進度條，效果和 Flyme OS 4 上的加載動畫同樣。

首先，來看下最終的效果：

 它的 HTML 結構也很簡單，但不是 Single Element：

<div class="spinner"><i></i></div>

外層元素 .spinner 負責顯示底部的半透明圓環：

.spinner {
    font-size: 20px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2);
}

.spinner 裏的 i 元素被裁剪(clip)了一半，並作 0° 至 180° 的順時鐘旋轉：

.spinner i {
    position: absolute;
    clip: rect(0, 1em, 1em, .5em);
    width: 1em;
    height: 1em;
    animation: spinner-circle-clipper 1s ease-in-out infinite;
}

@keyframes spinner-circle-clipper {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

i 的 :after 僞元素一樣被裁減了一半，並作 -180° 至 180° 的順時鐘旋轉：

.spinner i:after {
    position: absolute;
    clip: rect(0, 1em, 1em, .5em);
    width: 1em;
    height: 1em;
    content: '';
    animation: spinner-circle 1s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: inset 0 0 0 .1em #3aa8ed;
}

@keyframes spinner-circle {
    0% {
        transform: rotate(-180deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

代碼就這麼幾行，經過 2 個元素不斷旋轉致使的角度差，配合裁剪就能實現平滑的圓環長度變化效果。

慢動做、放大版：

 PS: 你能夠經過更改 .spinner 的 font-size 來縮放進度條的大小~ 

 

轉載自：http://c7sky.com/css3-flyme-loading-spinner.html