基于css3的环形动态进度条
浏览数：41 /
时间：2015年06月09日
基于css3实现的环形动态加载条，也用到了jquery。当时的想法是通过两个半圆的转动，来实现相应的效果，其实用css3的animation也可以实现这种效果。之所以用jquery是因为通过jquery可以在网站中动态改变加载的百分比。同时，用如果单纯用css3的animation的话扩展性太差，因为你要先确定出百分比是多少，而如果百分比超过一半时，左边的半圆也需转动，单纯用animation就太复杂了。
另外，svg和canvas都可以实现这样的效果。canvas的话我感觉原理应该差不多。有人提到通过大量的图片来实现应该也可以。
代码没有封装，封装的话可以做成一个插件。
<!DOCTYPE html>
<html>
<head>
<title>circle loading</title>
<style>
.cricle{
width:200px;height:200px;background:#0cc;
border-radius:50%;position:absolute;
}
.pre_left, .pre_right {
width: 200px;
height: 200px;
position: absolute;
top: 0;left: 0;
}
.left,.right{
display:block;
width:200px;height:200px;background:#00aacc;
position:absolute;top:0;left:0;border-radius:50%;
}
.pre_right, .right {
clip:rect(0,auto,auto,100px);
}
.pre_left, .left {
clip:rect(0,100px,auto,0);
}
.mask{
width:150px;height:150px;background:#fff;border-radius:50%;
position:absolute;top:25px;left:25px;
line-height:150px;text-align:center;color:#00aacc;font-size:30px;
}
</style>
</head>
<body>
<div class="cricle">
<div class="pre_left"><div class="left"></div></div>
<div class="pre_right"><div class="right"></div></div>
<div class="mask"><span>0</span>%</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
function criclefn(num){
var degree=num*3.6;
if(degree>360) degree=360;
if(degree<0) degree=0;
$({property:0}).animate({property:100},
{
duration:600,
step:function(){
var deg=this.property/100*degree;
var percent=parseInt(this.property/100*num)+1;
if (deg<=180) {
$(".right").css("-webkit-transform","rotate("+deg+"deg)");
$(".mask span").text(percent);
}else{
$(".cricle").css("background-color","orange");
$(".mask").css("color","orange");
deg=deg-180;
$(".right").css("-webkit-transform","rotate("+180+"deg)");
$(".left").css("-webkit-transform","rotate("+deg+"deg)");
$(".mask span").text(percent);
}
}
});
}
$(function($){
criclefn(70);
});
</script>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
