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-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