首先我们得了解什么是svg，它是使用 XML 来描述二维图形和绘图程序的语言。可以直接在html中使用svg标签实现。实现圆形进度条前先讲下svg里面stroke属性。
实现圆形进度条主要用到 stroke-dasharray 和 stroke-dashoffset 。
stroke-dasharray="2*50*3.14" ,代表虚线长314，空白间隔长314
stroke-dashoffset="2*50*3.14" ，代表虚线偏移是314，这样展示出来的部分就是空白间隔。
将圆的周长展开来表示就是这样：
用css实现主要通过用两个div分别画半圆，并结合 overflow:hidden 实现。
这是从100->0，如果是从0->100的话，只需要修改动画旋转角度即可。
以上就是我总结的两种画原型进度条的方法，挺有意思的吧？
html部分：<pre class="brush:htmltoolbar: trueauto-links: false"><div class="div1"> <div class="right-div2"> <div class="right-div3"></div></div><div class="left-div2"> <div class="left-div3"></div></div></div><div class="div4"><span>0</span>%</div></pre>
最内层的div3裁剪一半然后旋转需要的角度， 父级div2裁剪一半，此时已经裁剪出来了那个扇形了 最后在上面加个圆形遮盖层
css代码：
<pre class="brush:csstoolbar: trueauto-links: false">.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200pxheight:200pxborder-radius:50%} .div1 { background:#cccposition:relative} .right-div2, .right-div3, .left-div2, .left-div3 { position:absoluteleft:0top:0} .right-div2, .right-div3 { clip:rect(0,auto,auto,100px)} .left-div2, .left-div3 { clip:rect(0,100px,auto,auto)} .right-div3 { background:#f00transform:rotate(-180deg)} .left-div3 { background:#f00transform:rotate(-180deg)} .div4 { position:absolutetop:25pxleft:25pxwidth:150pxheight:150pxline-height:150pxtext-align:centerborder-radius:50%background:#fff}</pre>
js代码：
<pre class="brush:jstoolbar: trueauto-links: false">$(function(){ var a = 0 var b = 0 var timer = setInterval(function(){ a++ if(a<=50){ //-180deg是0%，转换一下 b = a*3.6-180$('.right-div3').css('transform','rotate(' + b + 'deg)') }else if(a>50&&a<=100){ //超过50%，需要修改左边的,右边0deg是50% $('.right-div3').css('transform','rotate(0)') //左边0deg是100%，转换一下 b = a*3.6-360$('.left-div3').css('transform','rotate(' + b + 'deg)') }else{ clearInterval(timer)return }$('.div4 span').html(a) },200)})</pre>
<div class="circle" style="left:660px"><div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>64</span>%</div>
</div>
css：
body {font-family: "微软雅黑"
}
.circle {
width: 200px
height: 200px
position: absolute
border-radius: 50%
background: #0cc
}
.pie_left, .pie_right {
width:200px
height:200px
position: absolute
top: 0left: 0
}
.left, .right {
width:200px
height:200px
background:#00aacc
border-radius: 50%
position: absolute
top: 0
left: 0
}
.pie_right, .right {
clip:rect(0,auto,auto,100px)
}
.pie_left, .left {
clip:rect(0,100px,auto,0)
}
.mask {
width: 150px
height: 150px
border-radius: 50%
left: 25px
top: 25px
background: #FFF
position: absolute
text-align: center
line-height: 150px
font-size: 20px
font-weight: bold
color: #00aacc
}
js：
$(function() {$('.circle').each(function(index, el) {
var num = $(this).find('span').text() * 3.6
if (num<=180) {
$(this).find('.right').css('transform', "rotate(" + num + "deg)")
} else {
$(this).find('.right').css('transform', "rotate(180deg)")
$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)")
}
})
})
