<h1>条纹进度条</h1> <div> <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div> <div role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div> </div> <div> <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div> <div role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div> </div>
动态条纹进度条
在进度条.progress 、.progress-striped两个类的基础上在加入类名.active就能实现动态条纹进度条。
其实现原理主要是通过css3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是 background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片
下面是css源码：
@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } }
@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画 “progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效
调用动画对应的样式代码如下：
.progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; }
例子：
<h1>动态条纹进度条</h1> <div> <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> </div> <div> <div role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">40%</div> </div> <div> <div role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div> <div role="progressbar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0">60%</div> </div>
效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：
层叠进度条：
层叠进度可以将不容状态的进度条放在一起，按水平方式排列
例子：