使用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

特別注意：本站所有轉載文章言論不代表本站觀點！

本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯系。

總結

以上是生活随笔為你收集整理的html怎么做进度条圆形,用css3实现圆形进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。