使用方法：

在進(jìn)度條“progress progress-striped”兩個(gè)類的基礎(chǔ)上再加入“active”類名。如下代碼：

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

實(shí)現(xiàn)原理：

為了讓條紋進(jìn)度條動(dòng)起來，Bootstrap框架還提供了一種動(dòng)態(tài)條紋進(jìn)度條。其實(shí)現(xiàn)原理主要通過CSS3的animation來完成。首先通過@keyframes創(chuàng)建了一個(gè)progress-bar-stripes的動(dòng)畫，這個(gè)動(dòng)畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因?yàn)闂l紋進(jìn)度條是通過CSS3的線性漸變來制作的，而linear-gradient實(shí)現(xiàn)的正是對(duì)應(yīng)背景中的背景圖片。

/*bootstrap.css文件第4500行～第4515行*/
@-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;
  }
}

了解CSS3的同學(xué)都知道，@keyframes僅僅是創(chuàng)建了一個(gè)動(dòng)畫效果，如果要讓進(jìn)度條真正的動(dòng)起來，我們需要通過一定的方式調(diào)用@keyframes創(chuàng)建的動(dòng)畫“progress-bar-stripes”，并且通過一個(gè)事件觸發(fā)動(dòng)畫生效。在Bootstrap框架中，通過給進(jìn)度條容器“progress”添加一個(gè)類名“active”，并讓文檔加載完成就觸“progress-bar-stripes”動(dòng)畫生效。

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>

調(diào)用動(dòng)畫對(duì)應(yīng)的樣式代碼如下：

/*bootstrap.css文件第4544行～第4547行*/
.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

運(yùn)行效果如下：

特別注意：要讓條紋進(jìn)度條動(dòng)起來，就需要讓“progress-striped”和“active”同時(shí)運(yùn)用，不然條紋進(jìn)度條是不具備動(dòng)效效果。