手把手教你做前端小插件:圆型进度条
由于业务需要，个人查了一下资料做了一个会滚动的百分比的圆型进度条，效果图如下，由于我的博客园js权限还没申请好，所以不能看到js运行的过程，在这里我总结一下实现过程。其中参考了http://www.tuicool.com/articles/AVRvmqm，并在此基础上进行了修改
效果图
效果图
1.先创建一个正方形。
.square{ margin: 20px auto; width: 200px; height: 200px; border: 1px solid #aaa; position: relative; }
<div class="square"> </div>
效果图
2.正方形左右各创建一个矩形，这里我为了显示比较明显，加上了有颜色的border，看上去两个矩形有重复，实际去掉border的位置两个矩形加起来刚好占据一个正方形.
在这里overflow:hidden起到很重要作用，至于作用看到下一步就知道了
.half-square{ width: 100px; height: 200px; position: absolute; overflow:hidden; top:0; } .half-square.left{ left: 0; border: 1px solid red; } .half-square.right{ right:0; border: 1px solid green; }
<div class="square"> <div class="half-square left"></div> <div class="half-square right"></div> </div>
效果图
3.这一步可以把上面的写的两个矩形的border去掉了。在这一步我先简单介绍一下border-radius这个属性，通过他可以设置border的弯曲度，通常而言我们都设置他为50%来达到圆型的效果。想更详细了解这个属性，各位童鞋可以自行百度一下，或者看看我的对border-radius的介绍 http://www.cnblogs.com/s-b-b/p/5830119.html
这里我们在右边矩形里面加入一个右半圆。本来应该可以显示半个圆形的，但是由于上面设置overflow:hidder,使得他只能显示一部分。
.circle{ width: 160px; height: 160px; border: 20px solid transparent; border-radius: 50%; position: absolute; top:0; } .circle.right{ right: 0; border-top:20px solid red; border-right:20px solid red; }
<div class="square"> <div class="half-square left"> <!-- <div class="circle left"></div> --> </div> <div class="half-square right"> <div class="circle right"> </div> </div> </div>
效果图
4.通过旋转调整的到不同进度
.circle.right{ right: 0; border-right:20px solid red; border-top: 20px solid red; transform: rotate(45deg); }
效果图
通过旋转45%就可以获得一个完整的半圆，同理我们如果不想显示，也就是进度为0，只需要旋转-135%。这样我们就可以通过旋转角度来表达进度的多少
5.同理得到左半圆，我们也可以通过旋转左半圆得到不同的进度，旋转135%左半圆就不会显示，旋转325%左半圆就会完全显示
.circle.left{ left: 0; border-left:20px solid red; border-top: 20px solid red; transform: rotate(-45deg); }
<div class="square"> <div class="half-square left"> <div class="circle left"> </div> </div> <div class="half-square right"> <div class="circle right"> </div> </div> </div>
效果图
6.实现40%进度的显示
经历过刚刚的展示，我们知道如果我们想左边显示的有效旋转角度是135%~325%，而右边显示的有效角度是-135%~45%，因此我们只需要根据进度去调整左右两个圆就好了。我们知道50%进度对应的180%的圆弧，也就是1点进度对应3.6圆弧度
因为我们只想显示40度，即小于50度的角度，只需要右半圆显示就好了，左半圆对他进行隐藏。因此我们有以下设置
.circle.left{ left: 0; border-left:20px solid red; border-top: 20px solid red; transform: rotate(135deg); }
而右边显示-135%~45%之间的40度就好了，也就是-135%+40*3.6，即9%。
.circle.right{ right: 0; border-right:20px solid red; border-top: 20px solid red; transform: rotate(9deg); }
效果图
7.显示70%的进度
此时右半圆肯定是全部都显示出来了，因为右半圆代表50%，而只需要调整左半圆的20%就好了，而从第五步可以知道，左半圆的有效旋转范围是135%~325%，而我们显示的是20%，所以需要135+20*3.6即207度。
效果图
8.通过js自动根据参数调整角度
我们总不能去傻乎乎地根据百分比去手动设置旋转度数，此时就需要借助js去调整。
这里我就不慢慢分析代码了，其实上面已经解释得很清楚了，下面只不过是用代码表示，主要是通过修改左右半圆的属性值去修改角度，别忘了把两个半圆的初始值设为0哦
function circlePercent(percent){ if(percent>100 || percent<0){ return false; }else{ if(percent<=50){ per=percent*3.6-135; document.getElementById("right-circle").style.transform = "rotate("+per+"deg)"; }else{ per=(percent-50)*3.6+135; document.getElementById("right-circle").style.transform = "rotate(45deg)"; document.getElementById("left-circle").style.transform = "rotate("+per+"deg)"; } } }
9.添加动画效果。
主要是通过设置js的setInterval来一点点调整角度，最终代码如下，直接ctrl+c,ctrl+v就可以用了....
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> .square{ margin: 20px auto; width: 200px; height: 200px; /*border: 1px solid #aaa;*/ position: relative; } .half-square{ width: 100px; height: 200px; position: absolute; overflow: hidden; top:0; } .half-square.left{ left: 0; /*border: 1px solid rgb(3,205,203);*/ } .half-square.right{ right:0; /*border: 1px solid green;*/ } .background{ width:200px; height: 200px; position: absolute; top: 0; left: 0; } .circle{ width: 160px; height: 160px; border: 20px solid transparent; border-radius: 50%; position: absolute; top:0; } .circle.left{ left: 0; border-left:20px solid rgb(3,205,203); border-top: 20px solid rgb(3,205,203); transform: rotate(135deg); } .circle.right{ right: 0; border-right:20px solid rgb(3,205,203); border-top: 20px solid rgb(3,205,203); transform: rotate(-135deg); } .circle.inner{ border:20px solid rgb(230,230,230); display: table-cell; vertical-align: middle; position: relative; } .inner-content{ margin: 0 auto; width: 50%; text-align: center; } </style> <script type="text/javascript"> var percent = 0; var circleTimeId = null; function circlePercent(time){ if(percent>100 || percent<0){ return false; } if(percent > time ){ clearInterval(circleTimeId); }else{ if(percent<=50){ per=percent*3.6-135; document.getElementById("right-circle").style.transform = "rotate("+per+"deg)"; }else{ per=(percent-50)*3.6+135; document.getElementById("right-circle").style.transform = "rotate(45deg)"; document.getElementById("left-circle").style.transform = "rotate("+per+"deg)"; } document.getElementById("percent-num").innerHTML= percent; percent = percent + 1; } } function time(time){ circleTimeId = setInterval("circlePercent("+time+")",20); } </script> </head> <body onload="time(70)"> <div class="square"> <div class="background"> <div class="circle inner"> <div class="inner-content"><span id="percent-num">0</span>%</div> <div class="inner-content">进度</div> </div> </div> <div class="half-square left"> <div class="circle left" id="left-circle"> </div> </div> <div class="half-square right"> <div class="circle right" id="right-circle"> </div> </div> </div> </body> </html>
