Bootstrap Progress Bar

Introduction

In this tutorial, you will see how to create progress bars for loading, redirecting, or action states using Bootstrap.

Basic, Striped, and Animated Progress Bar Examples

Example

<div class="container">
    <div class="row">
        <div class="span4">
            <h3>A basic vertical progress bar</h3>
            <div class="progress">
                <div class="bar"
                     style="width: 60%;"></div>
            </div>
            <h3>Striped progress bar, using gradients to create a striped effect</h3>
            <div class="progress progress-striped">
                <div class="bar" style="width: 60%;"></div>
            </div>
            <h3>An animated progress bar</h3>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 50%;"></div>
            </div>
        </div>
    </div>

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

Note that to display the third progress bar, add the '.active' class to give it a moving effect. Bootstrap uses CSS3 transition effects to create this animation. You can also adjust the width of the progress bar dynamically via JavaScript. This way, you can control the progress behavior.

When creating progress bars, you can use other colors.

Progress Bar Examples with Other Colors

Example

<div class="container">
    <div class="row">
        <div class="span4">
            <h3>Progress bars can also have other colors</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 -->

Browser Support

We have tested the above two examples in different browsers. We found that they display correctly in Firefox 12 and Chrome 19.0.1084.52, but the animation effect does not work in Opera 11.62, even though you can see the stripes and gradients. In Internet Explorer 8, all display effects are poor, with no animation, stripes, or gradients. Click here to download all the HTML, CSS, JS, and image files used in this tutorial.