Bootstrap 进度条

简介

在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。

基本的、条纹的和动画的进度条实例

实例代码

<div class="container">
    <div class="row">
        <div class="span4">
            <h3>一个基本的垂直方向进度条</h3>
            <div class="progress">
                <div class="bar"
                     style="width: 60%;"></div>
            </div>
            <h3>条纹进度条,使用梯度来创建一个条纹的效果</h3>
            <div class="progress progress-striped">
                <div class="bar" style="width: 60%;"></div>
            </div>
            <h3>一个动画进度条</h3>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 50%;"></div>
            </div>
        </div>
    </div>

    <hr>
</div> <!-- /container -->

在线查看实例

请注意，如果要显示第三种进度条，请添加 '.active' class 来让它具有运动感。Bootstrap 使用 css3 过渡效果创建这个动画。您也可以通过 JavaScript 动态地调整进度条的宽度。这样，就可以掌握进度行为。

在创建进度条时，您可以使用其他的颜色。

带有其他颜色的进度条实例

实例代码

<div class="container">
    <div class="row">
        <div class="span4">
            <h3>进度条也可能有其他颜色</h3>
            <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
                <div class="bar" style="width: 20%"></div>
            </div>
            <div class="progress progress-success progress-striped active" style="margin-bottom: 9px;">
                <div class="bar" style="width: 40%"></div>
            </div>
            <div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
                <div class="bar" style="width: 60%"></div>
            </div>
            <div class="progress progress-danger progress-striped active" style="margin-bottom: 9px;">
                <div class="bar" style="width: 80%"></div>
            </div>
        </div>
    </div>
</div>
<hr>
</div> <!-- /container -->

在线查看实例

浏览器支持

我们已经在不同的浏览器中测试了上面的两个实例。我们发现，在 Firefox 12 和 Chrome 19.0.1084.52 中能正常显示，但是在 Opera 11.62 中不能显示动画效果，即便您可以看到条纹和梯度。在 Internet Explorer 8 中，所有的显示效果都不佳，没有动画，也没有条纹和梯度。

点击这里，下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。