首先我们得了解什么是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的话，只需要修改动画旋转角度即可。
以上就是我总结的两种画原型进度条的方法，挺有意思的吧？
进度条效果做为网站常用模块无论是投资理财类、还是众筹类、加载提示类网站已经比较常见。另外，HTML5新增了 progress 标签，其重要程度可见一斑。
由于HTML的 progress 存在兼容性问题，本文主要讲解如何通过CSS实现一个简单的自定义进度条效果！
前端开发常用的进度条效果如下：
（环形进度条下次再讲！）
这两个算是比较有代表性的，一个的均匀的一个的不均匀的，实现起来略有不用。
以第一个为例：
这种比较简单，只需要两个 div 标签就可以了（一个标签也可以实现，后文会讲到）
原理介绍：
外层 div 用来显示进度条总长度以及背景色；内层div用来显示当前进度条进度，和当前进度条颜色。
结构如下：
样式如下：
此时效果如下：
只需要利用 js 动态控制上层 div 的宽度就可以实现最简单的自定义进度条了.
** 第二种带原点的进度条 **
此时实现原理跟第一种类似，只是背景色替换成了背景图片，图片如下：
这两个图片除了颜色不一样以外其他是一样大小的！
如果上面的能理解我想这个就不难理解了吧，不过为了显得文章完整还是简单做一个demo如下：
效果如下：
<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)")
}
})
})
