<!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>
