< Bootstrap Tutorial

Bootstrap progress bar

← Previous Next →


Bootstrap Progress Bars

The purpose of progress bars is to show that assets are loading, in progress, or that there is action taking place regarding elements on the page.

Default Progress Bar

The following code will create the simplest Progress Bar:

<div class="progress">
    <div class="progress-bar" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

This Progress bar will look like the following:

We can also add a label to the Progress Bar as shown below:

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

The progress bar now looks like this:

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

<div class="progress progress-striped">
    <div class="progress-bar" style="width: 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

The bar now looks as follows:

We can also add animation to the Progress Bar. Just add the .active class to .progress-stripped. The .active class animates the stripes from right to left.

Stacked Progress Bar

We can even stack multiple progress bars. Place the multiple progress bars into the same .progress to stack them as seen in the following example:

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

The created Progress Bar will look like the following:

← Previous Next →