Progress Bars in Bootstrap 5
Bootstrap Progress Bars
Bootstrap provides progress bars that display the progress of a task. Progress bars are commonly used in web applications to show the status of an ongoing operation such as uploading files or loading content.
To create a progress bar you can use the .progress class, along with the .progress-bar class.
As an example:
In this example:
- We've created a progress bar with a width of
50%. - The
role="progressbar" attribute is used to define the element as a progress bar, and the aria-valuenow, aria-valuemin, and aria-valuemax attributes define the current, minimum, and maximum values for the progress bar, respectively.
Text Inside Progressbar
You can also add text inside the progress bar to indicate the percentage of completion.
To do this, you can add a span element with the .progress-bar-text class inside the div element with the .progress-bar class.
As an example:
In this example:
- We've added the text
"75%" inside the progress bar to show the percentage of completion.
Customize Progress Bar
Bootstrap also provides various color classes that you can use to customize the appearance of the progress bar.
As an example:
In this example:
- We have creates a progress bar with a green background color using the
.bg-success class.
Progress Bar Height
Bootstrap Progress Bars have a default height of 1.5rem (or 24 pixels) but can be adjusted by modifying the height property of the .progress class in CSS.
As an example:
To set the height of all progress bars to 2rem, you can add the following CSS.
.progress {
height: 2rem;
}
Animated Progress Bar
You can use the .progress-bar-animated class to add an animation effect to the progress bar.
As an example:
In this example:
- The
progress-bar-animated class is added to the progress bar element to make it animate.
Multiple Progress Bars
You can create multiple progress bars in Bootstrap by adding multiple .progress-bar elements inside a .progress container.
As an example: