在一些网站的会有一些简历完整度，信用分等，如下图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);
}
});
};
