1、写一个样式为.containe的div用来包含进度条，其次是用样式为.title的div来包裹标题。
2、接下来，添加样式为.bar的di来包含填充和未填充的进度条样式。最后，在.bar里添加样式为.bar-unfill 和.bar-fill的span标签。
<div class="container"><div class="title plain">Plain</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill"></span>
</span>
</div>
</div>
3.简单的进度条的CSS代码.container 类里将 width 定义为 30% 使进度条能够自适应。放一些简单的 border-radius 之类的属性在我们的 .title 类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。
.container {width:30%
margin:0 auto
}
.title {
background:#545965
color:#fff
padding:15px
float:left
position:relative
-webkit-border-top-left-radius:5px
-webkit-border-bottom-left-radius:5px
-moz-border-radius-topleft:5px
-moz-border-radius-bottomleft:5px
border-top-left-radius:5px
border-bottom-left-radius:5px
}
4.首先建一个白色的背景
.bar-unfill {height:15pxdisplay:blockbackground:#fffwidth:100%border-radius:8px}5.定义进度条的样式，先令他的宽度为 100% ，因为这也会应用于定义和未定义的部分。所以在我们的 .bar-fill 的类里，令他的宽度为 0 作为起始的宽度，添加CSS3的 transition 属性使动画效果更加流畅，最后，我们将添加CSS3里的 animation 属性，定义动画的名字，和 duration 和 animation-iteration-count 属性。
.bar-fill {height:15px
display:block
background:#45c9a5
width:0
border-radius:8px
-webkit-transition:width .8s ease
-moz-transition:width .8s ease
transition:width .8s ease
-webkit-animation:progressbar 7s infinite
animation:progressbar 7s infinite
}
6.使用CSS3里的 @keyframe 规则来设置宽度从 0 变化到 100% 。你也能定制你自己喜欢的变化。
@-webkit-keyframes progressbar {from {
width:0
}
to {
width:100%
}
}
/* Standard syntax */
@keyframes progressbar {
from {
width:0
}
to {
width:100%
}
}
7.条纹进度条，应该把 .bar-fill 重新命名为 .bar-fill-stripes 。使用 backgrou-image 属性里的 linear-gradient 同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：
.bar-fill-stripes {height:15px
display:block
background:#e74c3c
width:0
border-radius:8px
background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)
-webkit-transition:width .8s ease
-moz-transition:width .8s ease
transition:width .8s ease
-webkit-animation:progressbar 7s infinite
animation:progressbar 7s infinite
}
追踪
<div class="container"><div class="title">Tracker</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill-tracker"></span>
<span class="track-wrap">
<span class="track"></span>
</span>
</span>
</div>
</div>
8.最后产生动画效果
.track-wrap {position:relative
top:-18px
-webkit-animation:progressbar2 7s infinite
animation:progressbar2 7s infinite
}
.track {
height:20px
display:block
background:#e74c3c
width:20px
border-radius:10px
position:relative
left:-12px
}
@-webkit-keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
}
/* Standard syntax */
@keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
}
昨天逛网页时看到有用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%画出圆弧
如果不考虑IE的话，用css3应该不难：1、边框用背景图或纯色都可以，配合圆角和阴影；2、里面的进度条可以用垂直方向的线性渐变及阴影配合实现；3、最后配合js动态修改里面进度条div的宽度和文字的显示即可。
