Bootstrap Progress Bars

Introduction

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

Examples of basic, striped, and animated progress bars

Examples

<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 -->

View examples online

Please note that to display the third progress bar, add the '.active' class to give it motion. Bootstrap uses CSS3 transitions to create this animation. You can also dynamically adjust the width of the progress bar through JavaScript. In this way, you can control the progress behavior.

When creating progress bars, you can use other colors.

Examples of progress bars with other colors

Examples

<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 -->

View examples online

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 display 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, no stripes, and no gradients.

Click here to download all the HTML, CSS, JS, and image files used in this tutorial.

Other Extensions