Bootstrap Progress Bars

In this tutorial you will learn how to create progress bars using Bootstrap.

Creating Progress Bar with Bootstrap

Progress bars can be used for showing the progress of a task or action to the users. The following example will show you how to create a simple progress bar with vertical gradient.

示例

Try this code »

```
<div class="progress">
```

    <div class="progress-bar" style="width: 60%;">

        <span class="sr-only">60% Complete</span>

```
    </div>
```
```
</div>
```

— 上面示例的输出将如下所示：

Creating Progress Bar with Label

To show to the progress status as a percentage label just remove the <span> with .sr-only class from within the progress bar as demonstrated in example above.

示例

Try this code »

```
<div class="progress">
```

    <div class="progress-bar" style="width: 60%;">

```
        60%
```
```
    </div>
```
```
</div>
```

— 上面示例的输出将如下所示：

If you are showing percentage label you should also add a min-width to the progress bar to ensure that the label text remains readable even for low percentage, like this.

示例

Try this code »

```
<div class="progress">
```

    <div class="progress-bar" style="min-width: 20px;">

```
        0%
```
```
    </div>
```
```
</div>
```
```
<div class="progress">
```

    <div class="progress-bar" style="min-width: 20px; width: 2%;">

```
        2%
```
```
    </div>
```
```
</div>
```

Creating Stripped Progress Bar

To create the stripped progress bar just add an extra class .progress-striped to the .progress base class, as shown in the example below:

示例

Try this code »

```
<div class="progress progress-striped">
```

    <div class="progress-bar" style="width: 60%;">

        <span class="sr-only">60% Complete</span>

```
    </div>
```
```
</div>
```

— 上面示例的输出将如下所示：

Similarly you can create the animated progress bar — just add the .active class to .progress-stripped. The .active class animates the stripes from right to left.

示例

Try this code »

<div class="progress progress-striped active">

    <div class="progress-bar" style="width: 60%;">

        <span class="sr-only">60% Complete</span>

```
    </div>
```
```
</div>
```

Warning: Due to lack of support for CSS3 animation properties the animated progress bar is not supported in any versions of IE upto IE9. The stripped progress bar uses CSS3 gradient to create the striped effect which is not supported in IE7-8.

Changing Progress Bar Value Dynamically

Static progress bars aren't very impressive. The following example will give you a rough idea of how to update the status of a Bootstrap progress bar dynamically using jQuery.

示例

Try this code »

```

```

<div class="progress progress-striped active">

```
    <div class="progress-bar"></div>
```
```
</div>
```
```
 
```
```

```
```
<script type="text/javascript">
```
```
    var i = 0;
```
```
    function makeProgress(){
```
```
        if(i < 100){
```
```
            i = i + 1;
```

            $(".progress-bar").css("width", i + "%").text(i + " %");

```
        }
```

        // Wait for sometime before running this script again

        setTimeout("makeProgress()", 100);

```
    }
```
```
    makeProgress();
```
```
</script>
```

Creating Stacked Progress Bar

You can also place multiple bars into the same progress bar to stack them.

示例

Try this code »

```
<div class="progress">
```

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

        <span class="sr-only">Program Files (40%)</span>

```
    </div>
```

    <div class="progress-bar progress-bar-warning" style="width: 25%">

        <span class="sr-only">Residual Files (25%)</span>

```
    </div>
```

    <div class="progress-bar progress-bar-danger" style="width: 15%">

        <span class="sr-only">Junk Files (15%)</span>

```
    </div>
```
```
</div>
```

— 上面示例的输出将如下所示：

Progress Bars with Emphasis Classes

Bootstrap also provides some emphasis utility classes for progress bars that can be further used to convey meaning through color.

示例

Try this code »

```
<div class="progress">
```

    <div class="progress-bar progress-bar-info" style="width: 20%">

        <span class="sr-only">20% Used</span>

```
    </div>
```
```
</div>
```
```
<div class="progress">
```

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

        <span class="sr-only">40% Used</span>

```
    </div>
```
```
</div>
```
```
<div class="progress">
```

    <div class="progress-bar progress-bar-warning" style="width: 80%">

        <span class="sr-only">80% Used</span>

```
    </div>
```
```
</div>
```
```
<div class="progress">
```

    <div class="progress-bar progress-bar-danger" style="width: 90%">

        <span class="sr-only">90% Used</span>

```
    </div>
```
```
</div>
```

— 上面示例的输出将如下所示：

Striped Progress Bars with Emphasis Classes

Similar to the solid colors, you can also create varied striped progress bars.

示例

Try this code »

```
<div class="progress progress-striped">
```

    <div class="progress-bar progress-bar-info" style="width: 20%">

        <span class="sr-only">20% Used</span>

```
    </div>
```
```
</div>
```
```
<div class="progress progress-striped">
```

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

        <span class="sr-only">40% Used</span>

```
    </div>
```
```
</div>
```
```
<div class="progress progress-striped">
```

    <div class="progress-bar progress-bar-warning" style="width: 80%">

        <span class="sr-only">80% Used</span>

```
    </div>
```
```
</div>
```
```
<div class="progress progress-striped">
```

    <div class="progress-bar progress-bar-danger" style="width: 90%">

        <span class="sr-only">90% Used</span>

```
    </div>
```
```
</div>
```

— 上面示例的输出将如下所示：

Bootstrap Progress Bars

Creating Progress Bar with Bootstrap

示例

Creating Progress Bar with Label

示例

示例

Creating Stripped Progress Bar

示例

示例

Changing Progress Bar Value Dynamically

示例

Creating Stacked Progress Bar

示例

Progress Bars with Emphasis Classes

示例

Striped Progress Bars with Emphasis Classes

示例

关于我们

联系方式

互动工具