在一些網站的會有一些簡歷完整度，信用分等，如下圖gif截圖是用css3完成的效果。實際效果要流暢更真實一些，gif截圖看著有些稍卡。

圓環.gif

一，html結構

1494404292(1).jpg

總構成一共三層：
最外層：底色為綠色；
中間層：是兩個圓形，這兩個圓形外面也分別包裹兩個圓形（用css3裁切成兩個半圓形）；
最上層：是一個圓形，通過絕對定位覆蓋在最上面，也就形成了圓環；這里可以寫一寫文案；

<div class="circle"> 
        <div class="pie_left"><div class="left"></div></div> 
        <div class="pie_right"><div class="right"></div></div> 
        <div class="mask1"><span>40</span>%<br><b>完整度</b></div>
</div>

二、css
最外層寫成圓形border-radius;
里外的兩個圓形pie_left,left,pie_right,right這四個圓都要裁切，裁切成半圓，如上圖那樣灰色的半圓；
舉個例子：clip:rect(30px,200px,200px,20px);這四個值分別表示上，右，下，左需要裁切的長度；如果為auto表示不裁切；如下圖所示：

1494406071(1).jpg

通過旋轉左右兩個半圓來露出綠色的進度，左半圓控制前百分之五十，右半圓控制后半分之五十；
舉個例子：如果進度是60%，左半圓逆時針旋轉180度，右半圓逆時針旋轉10%*360=36度。這樣就形成了60%的圓環進度；
下面是具體代碼：

.circle {
    width: 54px;
    height: 54px;
    position: absolute;
    border-radius: 54px;
    background: #00c79c;
    right: 0;
}
.pie_left, .pie_right { 
    width: 54px; 
    height: 54px; 
    position: absolute; 
    top: 0;
    left: 0; 
}
.right { 
    display: block; 
    width:54px; 
    height:54px; 
    background:#eaeaea; 
    border-radius: 54px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    transform: rotate(0deg); 
}
.left { 
    display: block; 
    width:54px; 
    height:54px; 
    background:#eaeaea; 
    border-radius: 54px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    transform: rotate(0deg); 
}
.pie_right, .right { 
    clip:rect(0,auto,auto,27px); 
}
.pie_left, .left { 
    clip:rect(0,27px,auto,0); 
}
.mask1 {
    width: 44px;
    height: 44px;
    border-radius: 21px;
    left: 5px;
    top: 5px;
    background: #FFF;
    position: absolute;
    text-align: center;
    font-size: 0.1rem;
    color:#00c79c;
}
.mask1 span {
    font-size:0.14rem;
}
.mask1 b {
    color:#a6a6a6;
    font-size: 0.1rem;
}

三、關于js
js相對簡單一些，獲取了完整度之后，計算好旋轉的角度，加上定時器，每過1ms或10ms讓左半圓或右半圓旋轉1度，這樣動畫就出來了。js寫的有點繁瑣，后期會改進。

exports.progress = function(){
    $('.circle').each(function() {
        var self=$(this);
        var parts = {
            point : 180,
            deg : self.find('span').text()*3.6,
            rightBar : self.find('.right'),
            leftBar :self.find('.left')
        };
        var timer,i = 0;
        if (parts.deg <= parts.point) {
            parts.rightBar.css({'-webkit-transform':'rotate(0deg)','transform':'rotate(0deg)'});
            timer = setInterval(function(){
                i === parts.deg && (clearInterval(timer));
                parts.leftBar.css({'-webkit-transform':'rotate('+(-i)+'deg)','transform':'rotate('+(-i)+'deg)'});
                i=i+2;
            },i*10);
        } else {
            timer = setInterval(function(){
                if(i > parts.point){
                    clearInterval(timer);
                    i=0;
                    timer = setInterval(function(){
                        i === parts.deg-parts.point && (clearInterval(timer));
                        parts.rightBar.css({'-webkit-transform':'rotate('+(-i)+'deg)','transform':'rotate('+(-i)+'deg)'});
                        i=i+2;
                    },i*10);
                }else{
                    parts.leftBar.css({'-webkit-transform':'rotate('+(-i)+'deg)','transform':'rotate('+(-i)+'deg)'});
                    i=i+2;
                }
            },i*10);
        }
    });
};