Elements:Progress Bars
Default
You can use inline
style
tags or the width utilities to control the amount of the progress bar that is filled.
Labels within progress bars
Sizes
Small
Default
Large
Colours
Standard Bootstrap contextual colours are available:
.progress-success .progress-info .progress-warning .progress-danger
Striped
Add the class
.progress-striped
the give the striped effect to default or coloured progress bars.
Multiple Bars
You can also include multiple
.progress-bar
elements within the
.progress
element.
With labels
Animated Progress Width
Add the attribute
data-bs-toggle="progress-bar-animated-progress"
to the
.progress-bar
element to make the progress bar width animate from 0 to the
aria-valuenow
value when it comes into view on screen.
Animated progress bars do not work in IE9, IE10+, Microsoft Edge or Opera 12
Animated Striped
Add the class
.progress-bar-animated
to the
.progress-bar
element to the give the striped effect to default or coloured progress bars.
Animated progress bars do not work in IE9, IE10+, Microsoft Edge or Opera 12