教你如何制作圆形进度条
2016-10-26 本文已影响126人
lMadman
常用的进度条有两种,一种是条行的,另一种是比较形象的圆形进度条。
圆形进度条的用处也比较多,插件也不少,但是想要在别人的插件中实现一些自定义的东西,还是比较有难度的。
比如:我想让进度可以实现不止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