Bootstrap 5 Progress – Simple, Striped, Animated and More

Progress bar in Bootstrap 5

The progress bar is a useful component that can be used for showing the users the progress of a process. For example, saving records in the database, downloading some resources, checkout process progress, etc.

Bootstrap 5 makes it quite easier for the front-end designing/usage of the progress bars.

You may create progress bars:

• Simple
• With labels
• Stripped progress bars
• Progress bars with animation
• Custom Color

See the section below for examples of each and more with code and output.

Creating simple progress bars

In the example below, five progress bars are created. Have a look at the code and output. Below is explained how the progress bar is created:

See online demo and code

How did it work?

• The outer <div> is given the progress class that indicates the max value of the progress bar.
• The inner <div> is given the progress-bar. This is used to show the progress so far.
• You may also see a little inline CSS e.g. style=”width: 25%”. You may also use custom CSS or utility class there. In that case, with more value of the width, more progress is visible to the user by default or other bg-background colors.

Creating various color progress bars

By using Bootstrap 5 background color classes, you may change the fill color to show the progress that matches your website theme.

See the example where we utilized various background classes:

See online demo and code

Setting Custom Color and width in style

This example shows setting the progress bar colors of your own choice – beyond the default available. Besides, we will set the on-page width of progress bars (under the style section before </head> tag).

See online demo and code

You can see seven classes in the <style> section before </head> tag.

There we set the background color as well as the width of the progress bar.

An example of striped progress bars

Just add the built-in progress-bar-striped class to .progress-bar and BS 5 will apply stripe via CSS gradient over the progress bar background color.

First, see the striped progress bar with BS 5 background color classes:

See online demo and code

Striped progress with custom colors

Similarly, you may create a striped progress bar for custom colors. Again, just add the progress-bar-striped. See an example and output:

See online demo and code

An animated striped progress bar example

For giving CSS 3 animation from left to right to the striped progress bar, add the progress-bar-animated class.

See online demo and code

To see the difference, we kept the last two progress bars unanimated.

How to add labels in progress bar?

Though we used it in our above examples, just to show it separately, this is how you will add the labels in the progress bar. For example, showing the percentage of progress to the users.

For that, simply add the text to the .progress-bar.

In the examples above and below, we write text before </div> tag:

See online demo and code

Making progress bar thicker or thinner (changing height)

In order to change the default height of the progress bar, you may use the inline style CSS.

See the example where different height is assigned to five press bars.

See online demo and code

An example of multiple progress bar (stacked)

You can create one progress with multiple progress bars inside it. Each progress bar in hat progress can have its 100% width. So, you may use this for showing multiple processes/progresses etc.

See an example of a multiple progress bar below:

See online demo and code

Reference: https://getbootstrap.com/docs/5.0/components/progress/