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.

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.

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.

The above example will return the result as shown below.

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.

The above example will return the result as shown below.

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.

The above example will return the result as shown below.

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.

The above example will return the result as shown below.

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.

The above example will return the result as shown below.

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.

The above example will return the result as shown below.

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