首先我们得了解什么是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+javascript 实现的圆形进度条，应该符合你要求
源代码 ： http://blog.csdn.net/tangdou5682/article/details/52778766
![前端js 输入框限制（只能输入数字，10位小数，除0[0-9]、.、--、-0[0-9]、-.不能开头外，其他的都可以）？](/aiimages/%E5%89%8D%E7%AB%AFjs+%E8%BE%93%E5%85%A5%E6%A1%86%E9%99%90%E5%88%B6%EF%BC%88%E5%8F%AA%E8%83%BD%E8%BE%93%E5%85%A5%E6%95%B0%E5%AD%97%EF%BC%8C10%E4%BD%8D%E5%B0%8F%E6%95%B0%EF%BC%8C%E9%99%A40%5B0-9%5D%E3%80%81.%E3%80%81--%E3%80%81-0%5B0-9%5D%E3%80%81-.%E4%B8%8D%E8%83%BD%E5%BC%80%E5%A4%B4%E5%A4%96%EF%BC%8C%E5%85%B6%E4%BB%96%E7%9A%84%E9%83%BD%E5%8F%AF%E4%BB%A5%EF%BC%89%EF%BC%9F.png)
