圆环进度圈

在一些网站的会有一些简历完整度，信用分等，如下图gif截图是用css3完成的效果。实际效果要流畅更真实一些，gif截图看着有些稍卡。

圆环.gif

一，html结构

1494404292(1).jpg

总构成一共三层：
最外层：底色为绿色；
中间层：是两个圆形，这两个圆形外面也分别包裹两个圆形（用css3裁切成两个半圆形）；
最上层：是一个圆形，通过绝对定位覆盖在最上面，也就形成了圆环；这里可以写一写文案；

 
        
 
        
 
        
40%
完整度

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