在网页中，经常见到进度条效果，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 属性。
进度条和其他独立组件一样，开发者可以根据自己的需要选择对应的版本：
LESS: progress-bars.less
SASS: _progress-bars.scss
基础进度条
实现原理：
需要两个容器，外容器使用类名.progress，子容器使用类名.progress-bar;其中.progress用来设置进度条容器的背景色，容器的高度，间距等；而.progress-bar设置进度方向，进度条的背景色和过度效果；下面是css源码：
rush:js;">
progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-Box-shadow: inset 0 1px 2px rgba(0,.1);
Box-shadow: inset 0 1px 2px rgba(0,.1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-Box-shadow: inset 0 -1px 0 rgba(0,.15);
Box-shadow: inset 0 -1px 0 rgba(0,.15);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}
例子：
rush:js;">
Now="30" aria-valuemin="0" aria-valuemax="100">
