昨天逛网页时看到有用css与js实现环形进度条的（那位博主在面试时被要求当场写出环形进度条π_π），然后就想尝试下写出来（感觉好尴尬），说实话春节后遗症真可怕 haha~
看了网上的三种方法实现方式如下：
- DIV旋转
两个clip过的半圆，边框设置颜色，左侧的用来旋转，右侧的固定不动（width：0px;），当进度到达50%时， 右侧的半圆显示出来（同时左半圆和右半圆的父元素div覆盖最外层的div），左侧的半圆继续旋转 。
可能我没说清楚，原文链接：http://blog.csdn.net/angeljsl/article/details/51208960
- SVG提供的一个范围广泛stroke 属性
使用SVGstroke-dasharray寥寥数行实现圆环loading进度效果，原文链接：http://www.zhangxinxu.com/wordpress/?p=4889
- SVG中的path进行绘制
利用path元素，使用path指令绘制扇形，原文链接：http://www.tuicool.com/articles/e2UzuaQ
常用的path指令:
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
两个介绍 SVG比较详细的网址
http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html
http://www.mb5u.com/HTML5/html5_96413.html
下面本人使用CSS3中的clip-path属性实现的效果
www.jianshu.com/u/7814fc84433b.png
www.jianshu.com.png
核心就是使用-webkit-clip-path:polygon();切割div，border-radius:50%;画出圆弧
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>利用 clip-path 实现环形进度条</title>
<style type="text/css">
*{margin:0;padding:0;}
#circle,.test1{
width:200px;
height:200px;
border-radius:50%;
}
#circle{
background-color:#ccc;
text-align:center;
position:relative;
left:50px;
top:50px;
}
.test2{
background-color:blue;
/*position: absolute;*/
/*clip: rect(0px,200px,200px,100px);*/
/*-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 100%,0% 100%,0% 0%,30% 0%);*/
}
.circle-ban{
width:170px;
height:170px;
border-radius:50%;
background-color:white;
position:absolute;
top:15px;
left:15px;
}
.circle-ban p{margin-top:76px;}
</style>
</head>
<body>
<div id="circle">
<div class="test1"></div>
<div class="circle-ban">
<p><span class="mask">0</span>%</p>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function press(r){
/* 百分比与角度的关系
* 100%对应360度->1%=3.6deg
* 角度与周长的关系
* 360度对应长度为800->0.45deg=1px
* 百分比与周长的关系
* 100%对应周长800->0.125%=1px
* ----->1%=8px
* 45deg=100px(角度对应的周长)=50%(clip-path中的百分比)
* ------->100%(百分比值)=400%(clip-path中的百分比)
*/
var r=r*4;
var div=$(".test1");
div.addClass("test2");
var k1="polygon(50% 50%,50% 0%,";
var k2=k1+"100% 0%,";
var k3=k2+"100% 100%,";
var k4=k3+"0% 100%,";
var k5=k4+"0% 0%,";
if(r<=50){
r+=50;
div.css({"-webkit-clip-path":k1+r+"% 0%)"});
}else if((r>50)&&(r<=150)){
r-=50;
div.css({"-webkit-clip-path":k2+"100% "+r+"%)"});
}else if((r>150)&&(r<=250)){
r=250-r;
div.css({"-webkit-clip-path":k3+r+"% 100%)"});
}else if((r>250)&&(r<=350)){
r=350-r;
div.css({"-webkit-clip-path":k4+"0% "+r+"%)"});
}else if((r>350)&&(r<=400)){
r-=350;
div.css({"-webkit-clip-path":k5+r+"% 0%)"});
}
}
var n=0;
var timer=setInterval((function(){
n++;
if(n==100){clearInterval(timer);timer=null;}
$(".mask").text(n);
press(n);
}),100);
</script>
</body>
</html>
网友评论