首先我们得了解什么是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的话，只需要修改动画旋转角度即可。
以上就是我总结的两种画原型进度条的方法，挺有意思的吧？
如果不考虑IE的话，用css3应该不难：1、边框用背景图或纯色都可以，配合圆角和阴影；
2、里面的进度条可以用垂直方向的线性渐变及阴影配合实现；
3、最后配合js动态修改里面进度条div的宽度和文字的显示即可。
