bootstrap动画进度条

创建一个动画的进度条的步骤如下：

• 添加一个带有 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>

结果如下所示：