創建一個動畫的進度條的步驟如下：

• 添加一個帶有 class .progress 和 .progress-striped 的 <div>。同時添加 class .active。
• 接著，在上面的 <div> 內，添加一個帶有 class .progress-bar 的空的 <div>。
• 添加一個帶有百分比表示的寬度的 style 屬性，例如 style="60%"; 表示進度條在 60% 的位置。

這將會使條紋具有從右向左的運動感。

實例

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="progress progress-striped active"> 
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> 
        <span class="sr-only">40% 完成</span> 
    </div>
 </div>

結果如下所示：

bootstrap動畫進度條