## 進度條 通過這些簡單、靈活的進度條，為當前工作流程或動作提供實時反饋。 **注意：** 進度條組件使用了 CSS3 的 transition 和 animation 屬性來完成一些特效。這些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中沒有被支持。Opera 12 不支持 animation 屬性。 **默認樣式進度條** 實現原理：需要兩個容器，外容器使用類名.progress，子容器使用類名.progress-bar;其中.progress用來設置進度條容器的背景色，容器的高度，間距等；而.progress-bar設置進度方向，進度條的背景色和過度效果。 ```html <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"> <span class="sr-only">60% Complete</span> </div> </div> ```  ***** **帶有提示標簽的進度條** 將設置了`.sr-only`類的`<span>`標簽從進度條組件中移除 類，從而讓當前進度顯示出來。 ```html <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;"> <span>60% Complete</span> </div> </div> ```  在展示很低的百分比時，如果需要讓文本提示能夠清晰可見，可以為進度條設置`min-width`屬性。 ```html <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width:20px;"> <span>0% Complete</span> </div> </div> ```  ***** **根據情境變化效果** 進度條組件使用與按鈕和警告框相同的類，為了能給用戶一個更好的體驗，也根據不同的狀態配置了不同的進度條顏色，主要包括以下四種： | 類 | 狀態 | | --- | --- | | `.progress-bar-info` | 表示信息進度條，藍色 | | `.progress-bar-success` | 表示成功進度條，綠色| | `.progress-bar-warning` | 表示警告進度條，黃色 | | `.progress-bar-danger` | 表示錯誤進度條，紅色 | ```html <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span>20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span>40% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span>60% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span>80% Complete</span> </div> </div> ```  ***** **條紋效果進度條** 通過漸變可以為進度條創建條紋效果，IE9 及更低版本不支持。條紋進度條采用css3的線性漸變來實現，并未借助任何圖片，使用條紋進度條只需在進度條的容器.progress基礎上追加類名”progress-striped”,如果要進度條紋像彩色進度一樣，具有彩色效果，只需在進度條上增加相應得顏色類名。 ```html <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span>20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span>40% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span>60% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span>80% Complete</span> </div> </div> ```  ***** **動畫效果** 給`.progress-bar-striped`添加`.active`類，使其呈現出由右向左運動的動畫效果。IE9 及更低版本的瀏覽器不支持。 ```html <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span>20% Complete</span> </div> </div> ``` 你需要復制以上代碼實際操作才可以展現出進度條的動態效果。 ***** **堆疊效果** 層疊進度可以將不容狀態的進度條放在一起，按水平方式排列，也就是把多個進度條放入同一個`.progress`中，使它們呈現水平排列堆疊的效果。 ```html <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span>20% Complete</span> </div> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span>20% Complete</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span>20% Complete</span> </div> <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"> <span>20% Complete</span> </div> </div> ```