使用方法：

在進度條“progress progress-striped”兩個類的基礎上再加入“active”類名。如下代碼：

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

實現原理：

為了讓條紋進度條動起來，Bootstrap框架還提供了一種動態條紋進度條。其實現原理主要通過CSS3的animation來完成。首先通過@keyframes創建了一個progress-bar-stripes的動畫，這個動畫主要做了一件事，就是改變背景圖像的位置，也就是background-position的值。因為條紋進度條是通過CSS3的線性漸變來制作的，而linear-gradient實現的正是對應背景中的背景圖片。

/*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的同學都知道，@keyframes僅僅是創建了一個動畫效果，如果要讓進度條真正的動起來，我們需要通過一定的方式調用@keyframes創建的動畫“progress-bar-stripes”，并且通過一個事件觸發動畫生效。在Bootstrap框架中，通過給進度條容器“progress”添加一個類名“active”，并讓文檔加載完成就觸“progress-bar-stripes”動畫生效。

<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>

調用動畫對應的樣式代碼如下：

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

運行效果如下：

特別注意：要讓條紋進度條動起來，就需要讓“progress-striped”和“active”同時運用，不然條紋進度條是不具備動效效果。