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

div class="progress">

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

— The output of the above example will look something like this:

Bootstrap Basic Progress Bar

Creating Progress Bar with Label

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


<div class="progress">

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

— The output of the above example will look something like this:

Bootstrap Basic Progress Bar with Label

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.




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



<div class="progress progress-striped">



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



</div

— The output of the above example will look something like this:
Bootstrap Stripped Progress Bar

Warning:The stripped progress bar uses a gradient to create the striped effect. The stripped progress bar is not supported in IE7-8.

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.

div class="progress progress-striped active">


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


</div>


Creating Stacked Progress Bar
You can also place multiple bars into the same progress bar to stack them.


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


Bootstrap Stacked Progress Bar

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.

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

The output of the above example will look something like this:
Bootstrap Progress Bar with Emphasis

Striped Progress Bars with Emphasis Classes

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

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