实现原理主要通过CSS3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片。动画的实现源码如下：
@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-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; } }
调用动画的实现源码如下：
.progress.active .progress-bar, .progress-bar.active { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; }
层叠进度条
层叠进度条可以将不同状态的进度条放置在一起，按水平方式排列。例如：
<div> <div></div> <div></div> <div></div> <div></div> </div>
我们可以发现，层叠进度条并没有额外的样式代码，之所以这样就能生效是因为在“progress-bar”上有一个左浮动的样式。要注意，层叠进度条宽度之和不能大于100%。
带Label的进度条
要实现带Label的进度条，只需要在进度条中添加你需要的值即可。例如：
<div> <div>20%</div> </div>
要是那进度条的值为0%时，可以这么写：
<div> <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div> </div>
以上所述是小编给大家介绍的 Bootstrap源码学习笔记之bootstrap进度条，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: