Bootstrap Progress Bars

In bootstrap, the progress bars are useful to show the progress of the job or task that is pending to complete.

 

To create progress bars, it is required to use .progress and .progress-bar classes and an inline style to modify the width of the progress bar as shown below.

 

Live Preview <div class="progress">
   <div class="progress-bar"></div>
</div>
<div class="progress">
   <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
   <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
   <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
   <div class="progress-bar" style="width: 100%"></div>
</div>

If you observe the above code, we created a wrapper (<div>) element with .progress class, and it is useful to indicate the max value of the progress bar. Inside of wrapper element, we added another child <div> element with .progress-bar class to indicate the progress so far and added inline styles to set the width of a progress bar.

 

The above example will return the result as shown below.

 

 

If you observe the above code, we used an inline style element (style="width: 50%") to set the width of a progress bar. Instead, we can also use bootstrap utility classes such as .w-25, .w-50, .w-75, .w-100Etc. to set the width of the progress bar as shown below.

 

<div class="progress">
   <div class="progress-bar w-25"></div>
</div>
<div class="progress">
   <div class="progress-bar w-50"></div>
</div>

Bootstrap Progress Bar with Label

You can add a label inside of the progress bar to show the progress status for that, add a text inside of the .progress-bar class <div> like as shown below.

 

Live Preview <div class="progress">
   <div class="progress-bar" style="width: 25%">25%</div>
</div>
<div class="progress">
   <div class="progress-bar" style="width: 50%">50%</div>
</div>
<div class="progress">
   <div class="progress-bar" style="width: 75%">75%</div>
</div>

The above example will return the result as shown below.

 

Bootstrap progress bar with labels example result

Bootstrap Progress Bar Height

In bootstrap, by default, the progress bar height will be 16px. In case if you want to change the height of the progress bar, set the height property on .progress class <div> element.

 

Live Preview <div class="progress" style="height:10px">
   <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
   <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" style="height:30px">
   <div class="progress-bar" style="width: 50%"></div>
</div>

The above example will return the result as shown below.

 

Bootstrap progress bar set height example result

Bootstrap Colored Progress Bars

To change the appearance of the progress bar, use bootstrap background utility classes such as .bg-success, .bg-warning, .bg-info, .bg-dangerEtc. along with .progress-bar class.

 

Live Preview <div class="progress">
    <div class="progress-bar" style="width: 40%">40%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-danger" style="width: 50%">50%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-warning" style="width: 60%">60%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-info" style="width: 70%">70%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-success" style="width: 80%">80%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-secondary" style="width: 90%">90%</div>
</div>
<div class="progress">
    <div class="progress-bar bg-dark" style="width: 100%">100%</div>
</div>

The above example will return the result as shown below.

 Bootstrap colored progress bars example result

Bootstrap Striped Progress Bars

In bootstrap, you can apply the striped effect to your progress bars by adding .progress-bar-striped class to any .progress-bar. The .progress-bar-striped class will apply stripe via CSS gradient over the progress bar’s background color.

 

Live Preview <div class="progress">
   <div class="progress-bar progress-bar-striped" style="width: 50%"></div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-striped bg-danger" style="width: 60%"></div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-striped bg-warning" style="width: 70%"></div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-striped bg-info" style="width: 80%"></div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-striped bg-success" style="width: 90%"></div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-striped bg-dark" style="width: 100%"></div>
</div>

The above example will return the result as shown below.

 

Bootstrap striped progress bars example result

Bootstrap Animated Progress Bars

In bootstrap, we can apply the animation effect to the striped progress bars. To animate the striped progress bar, you need to add .progress-bar-animated class along with .progress-bar class.

 

The .progress-bar-animated class will animate the striped progress bar from right to left via CSS animations.

 

Live Preview <div class="progress">
   <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%"></div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" style="width: 60%"></div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" style="width: 70%"></div>
</div>
<div class="progress">
   <div class="progress-bar progress-bar-striped bg-success progress-bar-animated" style="width: 90%"></div>
</div>

The above example will return the result as shown below.

 

Bootstrap animated progress bars example result

Bootstrap Multiple Progress Bars

In bootstrap, you can merge multiple progress bars in one progress bar by adding multiple .progress-bar div’s inside of .progress class <div> element.

 

Live Preview <div class="progress">
   <div class="progress-bar bg-danger" style="width: 20%"></div>
   <div class="progress-bar bg-warning" style="width: 20%"></div>
   <div class="progress-bar" style="width: 20%"></div>
   <div class="progress-bar bg-success" style="width: 40%"></div>
</div>

The above example will return the result as shown below.

 

Bootstrap multiple progress bars example result

 

This is how we can use the progress bars in our applications to show the progress of tasks based on our requirements.