1吞加、css+js
思路：
1、將環(huán)形的圓看成兩個(gè)半圓尽狠；
2衔憨、0-50的時(shí)候，視覺(jué)上是右半圓開始展示進(jìn)度條袄膏，但是在實(shí)現(xiàn)上是左半圓開始以右順時(shí)針旋轉(zhuǎn)践图；
3、50-100的時(shí)候沉馆，視覺(jué)上是左半圓開始展示進(jìn)度條码党，但是實(shí)現(xiàn)上是右半圓開始向左旋轉(zhuǎn)
4德崭、開始時(shí)，右半圓肯定是不顯示的揖盘，只有在50-100時(shí)才顯示出來(lái)
5眉厨、開始時(shí)，左半圓肯定要展示的兽狭，不然旋轉(zhuǎn)也看不出效果憾股，但是這樣左邊的旋轉(zhuǎn)就能看出來(lái)，所以要一個(gè)遮罩將左邊遮擋住
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#start{
height: 200px;
width: 200px;
margin: auto auto;
background-color: antiquewhite;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.circle{
height: 200px;
width: 200px;
position: relative;
}
.circle .left ,
.circle .right,
.circle .mask{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
/*將整個(gè)矩形切成半矩形*/
clip: rect(0,100px,200px,0);
background-color: #fff;
}
.circle .left ,
.circle .right{
border:10px solid RED;
border-radius: 50%;
}
.circle .right{
/*將應(yīng)該在右側(cè)的半圓旋轉(zhuǎn)到右邊箕慧，并且將其隱藏*/
opacity: 0;
transform: rotate(180deg);
}
.trans-rotate{
-webkit-transition: transform .1s ease-in-out;
-moz-transition: transform .1s ease-in-out;
-ms-transition: transform .1s ease-in-out;
-o-transition: transform .1s ease-in-out;
transition: transform .1s ease-in-out;
}
</style>
</head>
<body>
<button id="start"></button>
<div class="circle">
<!--左半圓-->
<div id="left" class="left trans-rotate"></div>
<!--右半圓-->
<div id="right" class="right trans-rotate"></div>
<!--在前面半部分時(shí)服球，左半圓會(huì)開始向右邊旋轉(zhuǎn)，需要用這個(gè)遮擋住左邊效果-->
<div id="mask" class="mask"></div>
</div>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
var left = document.getElementById("left");
var right = document.getElementById("right");
var mask = document.getElementById("mask");
var circleInter;
var rangeValue=0;
$(function(){
$("#start").click(function(){
circleInter=setInterval(function(){
rangeValue=rangeValue+5;//數(shù)字越大進(jìn)度進(jìn)展的越快
if(rangeValue<=50){
//左半圓開始向右旋轉(zhuǎn)销钝，有進(jìn)度條開始的視覺(jué)效果
left.style.webkitTransform="rotate("+3.6*rangeValue+"deg)";
//遮罩展示有咨，將左邊遮擋住，不讓用戶看到左邊旋轉(zhuǎn)的效果
mask.style.opacity="1";
}else if(rangeValue<=100){
right.style.opacity="1";
//左右半圓開始向左旋轉(zhuǎn)蒸健，進(jìn)度條后半部分
right.style.webkitTransform="rotate("+3.6*rangeValue+"deg)";
//將遮罩去掉座享，不去掉圓旋轉(zhuǎn)到右邊也被遮擋了，會(huì)看不到效果似忧；
mask.style.opacity="0";
}else{
clearInterval(circleInter);
}
},100);
})
});
</script>
</body>
</html>
效果展示：（gif出來(lái)的有點(diǎn)停頓渣叛，真實(shí)的還是挺流暢的，哈哈）
IMG_0751.GIF
- svg
使用svg來(lái)繪制這種二維圖形真的很方便盯捌；
思路很簡(jiǎn)單：使用svg的circle淳衙，然后動(dòng)態(tài)修改circle的stroke-dashoffset；進(jìn)度條就看成circle的stroke饺著；
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#start{
height: 200px;
width: 200px;
margin: auto auto;
background-color: antiquewhite;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
#circleSvg{
width: 200px;
height: 200px;
stroke-dasharray: 255%;
stroke-dashoffset: 255%;
stroke: red;
fill: none;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
</style>
</head>
<body>
<button id="start">svg</button>
<svg id="circleSvg">
<!--cx=圓心橫坐標(biāo) cy=圓心縱坐標(biāo) r=半徑 stroke-width=邊框的寬度-->
<circle id="circle" cx="50%" cy="50%" r="40%" stroke-width="10%"></circle>
</svg>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
var circle = document.getElementById("circle");
var circleInter;
var rangeValue=0;
$(function(){
$("#start").click(function(){
circleInter=setInterval(function(){
rangeValue=rangeValue+5;//數(shù)字越大進(jìn)度進(jìn)展的越快
if(rangeValue<=255){
circle.setAttribute("stroke-dashoffset",255-rangeValue+"%");
}else{
clearInterval(circleInter);
}
},100);
})
});
</script>
</body>
</html>
展示效果和上面css+js完成的基本一樣箫攀，就不再去弄gif了，偷個(gè)懶
3.canvas
canvas畫圖很方便啦幼衰，直接上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#start{
height: 200px;
width: 200px;
margin: auto auto;
background-color: antiquewhite;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
</style>
</head>
<body>
<button id="start">svg</button>
<canvas id="canvas" width="200" height="200"></canvas>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var rangeValue=0;
var w = canvas.width;
var h = canvas.height;
var con = canvas.getContext("2d");
var val = {
x:w/2,
y:w/2,
r:w/2-10,
beginAngle:-Math.PI/2,
endAngle:0
};
con.lineWidth = 10;
con.strokeStyle = "red";
$(function(){
$("#start").click(function(){
circleInter=setInterval(function(){
rangeValue = rangeValue+5;
if(rangeValue<=360){
draw();
}else{
clearInterval(circleInter);
}
},100);
})
});
function draw(){
con.restore();
con.clearRect(0,0,w,h);
var rangValue = Number(rangeValue);
val.endAngle = val.beginAngle+(rangValue/360)*2*Math.PI;
con.beginPath();
con.arc(val.x,val.y,val.r,val.beginAngle,val.endAngle,false);
con.stroke();
con.save();
}
</script>
</body>
</html>
其實(shí)這個(gè)是很多動(dòng)圖的原型靴跛，比如長(zhǎng)按錄音時(shí)外圍的進(jìn)度條，比如時(shí)鐘等等的基礎(chǔ)都是這個(gè)渡嚣，理解了這個(gè)原理很多東西做起來(lái)都很順手了梢睛。
