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