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