html怎么做进度条圆形,用css3实现圆形进度条

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

html部分：

0%

最内层的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);

});

标签：

代码

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点！

本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。