常用的进度条有两种，一种是条行的，另一种是比较形象的圆形进度条。
圆形进度条的用处也比较多，插件也不少，但是想要在别人的插件中实现一些自定义的东西，还是比较有难度的。
比如：我想让进度可以实现不止100%，超过100%还显示100%的状态，如这样
Paste_Image.png
又或者，我想圆形进度条的中间不止显示100%，还有一些别的内容，迫于这两个因素，今天我学到了一种自定义圆形进度条的制作方法，在此分享给大家。
<div class="circle" style="left:0">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>0</span>%</div>
</div>
<div class="circle" style="left:220px">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>15</span>%</div>
</div>
<div class="circle" style="left:440px">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>30</span>%</div>
</div>
<div class="circle" style="left:660px">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>60</span>%</div>
</div>
<div class="circle" style="left:880px">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>90</span>%</div>
</div>
body {
font-family: "微软雅黑";
}
.circle {
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
background: #0cc;
}
.pie_left, .pie_right {
width:200px;
height:200px;
position: absolute;
top: 0;left: 0;
}
.left, .right {
width:200px;
height:200px;
background:#00aacc;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.pie_right, .right {
clip:rect(0,auto,auto,100px);
}
.pie_left, .left {
clip:rect(0,100px,auto,0);
}
.mask {
width: 150px;
height: 150px;
border-radius: 50%;
left: 25px;
top: 25px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 150px;
font-size: 20px;
font-weight: bold;
color: #00aacc;
}
$(function() {
$('.circle').each(function(index, el) {
var num = $(this).find('span').text() * 3.6;
if (num<=180) {
$(this).find('.right').css('transform', "rotate(" + num + "deg)");
} else {
$(this).find('.right').css('transform', "rotate(180deg)");
$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
};
});
});
通过上面的代码，就可以实现简单圆形进度条，效果如下：
Paste_Image.png
最后，给大家看一下实战项目中的样子：
Paste_Image.png
Paste_Image.png
