??昨天逛網(wǎng)頁(yè)時(shí)看到有用css與js實(shí)現(xiàn)環(huán)形進(jìn)度條的（那位博主在面試時(shí)被要求當(dāng)場(chǎng)寫出環(huán)形進(jìn)度條π_π）恩溅，然后就想嘗試下寫出來(lái)（感覺好尷尬），說(shuō)實(shí)話春節(jié)后遺癥真可怕 haha~
??看了網(wǎng)上的三種方法實(shí)現(xiàn)方式如下：
- DIV旋轉(zhuǎn)
??兩個(gè)clip過(guò)的半圓谓娃，邊框設(shè)置顏色脚乡，左側(cè)的用來(lái)旋轉(zhuǎn)，右側(cè)的固定不動(dòng)（width：0px;）滨达，當(dāng)進(jìn)度到達(dá)50%時(shí)奶稠， 右側(cè)的半圓顯示出來(lái)（同時(shí)左半圓和右半圓的父元素div覆蓋最外層的div），左側(cè)的半圓繼續(xù)旋轉(zhuǎn) 弦悉。
??可能我沒說(shuō)清楚窒典，原文鏈接：http://blog.csdn.net/angeljsl/article/details/51208960
- SVG提供的一個(gè)范圍廣泛stroke 屬性
??使用SVGstroke-dasharray寥寥數(shù)行實(shí)現(xiàn)圓環(huán)loading進(jìn)度效果蟆炊，原文鏈接：http://www.zhangxinxu.com/wordpress/?p=4889
- SVG中的path進(jìn)行繪制
??利用path元素稽莉，使用path指令繪制扇形，原文鏈接：http://www.tuicool.com/articles/e2UzuaQ
??常用的path指令:
M = moveto(M X,Y) ：將畫筆移動(dòng)到指定的坐標(biāo)位置
L = lineto(L X,Y) ：畫直線到指定的坐標(biāo)位置
H = horizontal lineto(H X)：畫水平線到指定的X坐標(biāo)位置
V = vertical lineto(V Y)：畫垂直線到指定的Y坐標(biāo)位置
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線
Z = closepath()：關(guān)閉路徑
兩個(gè)介紹 SVG比較詳細(xì)的網(wǎng)址
??http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html
??http://www.mb5u.com/HTML5/html5_96413.html
下面本人使用CSS3中的clip-path屬性實(shí)現(xiàn)的效果
??核心就是使用-webkit-clip-path:polygon();切割div涩搓，border-radius:50%;畫出圓弧
直接上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>利用 clip-path 實(shí)現(xiàn)環(huán)形進(jìn)度條</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){
/* 百分比與角度的關(guān)系
* 100%對(duì)應(yīng)360度->1%=3.6deg
* 角度與周長(zhǎng)的關(guān)系
* 360度對(duì)應(yīng)長(zhǎng)度為800->0.45deg=1px
* 百分比與周長(zhǎng)的關(guān)系
* 100%對(duì)應(yīng)周長(zhǎng)800->0.125%=1px
* ----->1%=8px
* 45deg=100px(角度對(duì)應(yīng)的周長(zhǎng))=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>
