Saturday, June 10, 2023
HomejQueryBootstrap 5 Progress – Easy, Striped, Animated and Extra

Bootstrap 5 Progress – Easy, Striped, Animated and Extra

Progress bar in Bootstrap 5

The progress bar is a helpful part that can be utilized for exhibiting the customers the progress of a course of. For instance, saving information within the database, downloading some assets, checkout course of progress, and so forth.

Bootstrap 5 makes it fairly simpler for the front-end designing/utilization of the progress bars.

It’s possible you’ll create progress bars:

  • Easy
  • With labels
  • Numerous background colours by utilizing background courses
  • Stripped progress bars
  • Progress bars with animation and so forth.

See the part under for examples of every and extra with code and output.

Creating easy progress bars

Within the instance under, 5 progress bars are created. Take a look on the code and output. Under is defined how the progress bar is created:


How did it work?

  • The outer <div> is given the progress class that signifies the max worth of the progress bar.
  • The inside <div> is given the progress-bar. That is used to point out the progress to this point.
  • You may additionally see somewhat inline CSS e.g. fashion=”width: 25%”. You may additionally use customized CSS or utility class there. In that case, with extra worth of the width, extra progress is seen to the consumer by default or different bg-background colours.

Creating varied colour progress bars

By utilizing Bootstrap 5 background colour courses, you might change the fill colour to point out the progress that matches your web site theme.

See the instance the place we utilized varied background courses:


Setting Customized Colour and width in fashion

This instance reveals setting the progress bar colours of your individual alternative – past the default accessible. In addition to, we’ll set the on-page width of progress bars (below the fashion part earlier than </head> tag).


You may see seven courses within the part earlier than tag.

There we set the background colour in addition to the width of the progress bar.

An instance of striped progress bars

Simply add the built-in progress-bar-striped class to .progress-bar and BS 5 will apply stripe by way of CSS gradient over the progress bar background colour.

First, see the striped progress bar with BS 5 background colour courses:

Striped progress with customized colours

Equally, you might create a striped progress bar for customized colours. Once more, simply add the progress-bar-striped. See an instance and output:


An animated striped progress bar instance

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

To see the distinction, we saved the final two progress bars unanimated.

How you can add labels in progress bar?

Although we used it in our above examples, simply to point out it individually, that is how you’ll add the labels within the progress bar. For instance, exhibiting the proportion of progress to the customers.

For that, merely add the textual content to the .progress-bar.

Within the examples above and under, we write textual content earlier than </div> tag:


Making progress bar thicker or thinner (altering peak)

With the intention to change the default peak of the progress bar, you might use the inline fashion CSS.

See the instance the place completely different peak is assigned to 5 press bars.


An instance of a number of progress bar (stacked)

You may create one progress with a number of progress bars inside it. Every progress bar in hat progress can have its 100% width. So, you might use this for exhibiting a number of processes/progresses and so forth.

See an instance of a a number of progress bar under:





Please enter your comment!
Please enter your name here

Most Popular

Recent Comments