在一些網(wǎng)站的會(huì)有一些簡(jiǎn)歷完整度，信用分等，如下圖gif截圖是用css3完成的效果。實(shí)際效果要流暢更真實(shí)一些，gif截圖看著有些稍卡。

圓環(huán).gif

一，html結(jié)構(gòu)

1494404292(1).jpg

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

<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;
里外的兩個(gè)圓形pie_left,left,pie_right,right這四個(gè)圓都要裁切，裁切成半圓，如上圖那樣灰色的半圓；
舉個(gè)例子：clip:rect(30px,200px,200px,20px);這四個(gè)值分別表示上，右，下，左需要裁切的長(zhǎng)度；如果為auto表示不裁切；如下圖所示：

1494406071(1).jpg

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

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

三、關(guān)于js
js相對(duì)簡(jiǎn)單一些，獲取了完整度之后，計(jì)算好旋轉(zhuǎn)的角度，加上定時(shí)器，每過1ms或10ms讓左半圓或右半圓旋轉(zhuǎn)1度，這樣動(dòng)畫就出來了。js寫的有點(diǎn)繁瑣，后期會(huì)改進(jìn)。

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