用css3实现圆形进度条详解编程语言

使用css3的圆角、旋转、剪切属性实现圆形进度条，原理不难，两次剪切加一次旋转。 进度条分左右两边，50%一下操作右边的就行，超过50%操作左边的 样式随便写的，代码如下：

html部分：

 div  

  div  

  div  /div 

  /div 

  div  

  div  /div 

  /div 

 /div 

 div  span 0% /div 

最内层的div3裁剪一半然后旋转需要的角度，
父级div2裁剪一半，此时已经裁剪出来了那个扇形了
最后在上面加个圆形遮盖层

css代码：

.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; border-radius:50%;} 

.div1 { background:#ccc; position:relative;} 

.right-div2, .right-div3, .left-div2, .left-div3 { position:absolute; left:0; top:0;} 

.right-div2, .right-div3 { clip:rect(0,auto,auto,100px);} 

.left-div2, .left-div3 { clip:rect(0,100px,auto,auto);} 

.right-div3 { background:#f00; transform:rotate(-180deg);} 

.left-div3 { background:#f00; transform:rotate(-180deg);} 

.div4 { position:absolute; top:25px; left:25px; width:150px; height:150px; line-height:150px; text-align:center; border-radius:50%; background:#fff;}

js代码：

$(function(){ 

 var a = 0; 

 var b = 0; 

 var timer = setInterval(function(){ 

 a++; 

 if(a =50){ 

 //-180deg是0%，转换一下 

 b = a*3.6-180; 

 $(.right-div3).css(transform,rotate( + b + deg)); 

  

 }else if(a 50 a =100){ 

 //超过50%，需要修改左边的,右边0deg是50% 

 $(.right-div3).css(transform,rotate(0)); 

  

 //左边0deg是100%，转换一下 

 b = a*3.6-360; 

 $(.left-div3).css(transform,rotate( + b + deg)); 

 }else{ 

 clearInterval(timer); 

 return; 

 } 

 $(.div4 span).html(a); 

 },200); 

});

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/11125.html