怎样用div实现带百分百环形进度条

html5+javascript 实旁庆现的圆形进度运慎握条，应该符合你要求

源代码孝并 ： http://blog.csdn.net/tangdou5682/article/details/52778766

首先，我们制作的这个进度条并没有后台数据作为支撑，所以是一个靠js实现的一个简单的页面。

我们首先需要新建一个html5的页面，其使用的progress元素实在html5时代才出现的。

我们在新建的页面中，输入一个段落标签，一个进度条，一个button按钮。

然后，我们需要设置一下进度条显示的进度。value代表从多少开始，max代表到多少结束。我们做的是百分比形式的，应该写成这样的。

这些做好之后，我们需要书写两个小的事件，实现原理大体上是鼠标单击下载按钮，开始下载变为正在下载百分之多少，等到达到我们伏烂滑预设的时间后显示下载完成。

我们之前已经给p标签和progress标签分别赋予了不同的缺腊id，我们需要获取到这两个元素，并将他们赋给两个变量。

我们还要将progress的初始值设为0,当鼠标单击的时候，我们以一定的时间为周期调用写好的事件。

函数写好之后，我们在浏览器中调试，点击下载按钮之后会在300ms内完成下载历做时间。

  昨天逛网页时看到有用css与js实现环形进度条的蔽渗吵（那位博主在面试时被要求当场写出环形进度条π_π），然后就想尝试下写出来（感觉好尴尬），说实喊袭话春节后遗症真可怕 haha~

  看了网上的 三种方法 实现方式如下：

  两个clip过的半圆，边框设置颜色，左侧的用来旋转，右侧的固定不动（width：0px），当进度到达50%时， 右侧的半圆显示出来（同时左半圆和右半圆的父元素div覆盖最外层的div），左侧的半圆继续旋转 。

  可能我没说清楚，原文链接： http://blog.csdn.net/angeljsl/article/details/51208960

  使用SVGstroke-dasharray寥寥数行实现圆环loading进度效果，原文链接： http://www.zhangxinxu.com/wordpress/?p=4889

  利用path元素，使用path指令绘宏侍制扇形，原文链接： http://www.tuicool.com/articles/e2UzuaQ

  常用的path指令:

两个介绍 SVG比较详细的网址

   http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html

   http://www.mb5u.com/HTML5/html5_96413.html

  核心就是使用-webkit-clip-path:polygon()切割div，border-radius:50%画出圆弧

---