Progress Bars
1.
Progress Bars Colors
Use background utility classes to change the appearance of individual progress bars.
Progress Bars: Primary #1.01
Default progress styling. To use, add .bg-primary to the base .progress-bar class.
Progress Bars: Success #1.02
Default progress styling. To use, add .bg-success to the base .progress-bar class.
Progress Bars: Info #1.03
Default progress styling. To use, add .bg-info to the base .progress-bar class.
Progress Bars: Warning #1.04
Default progress styling. To use, add .bg-warning to the base .progress-bar class.
Progress Bars: Danger #1.05
Default progress styling. To use, add .bg-danger to the base .progress-bar class.
Progress Bars: Dark #1.06
Default progress styling. To use, add .bg-dark to the base .progress-bar class.
Progress Bars: Secondary #1.07
Default progress styling. To use, add .bg-secondary to the base .progress-bar class.
Progress Bars: Custom Color #1.08
Default progress styling. To use, add .bg-yellow to the base .progress-bar class.
Progress Bars: Social Color #1.09
Default progress styling. To use, add .bg-facebook to the base .progress-bar class.
2.
Progress Bars Heights
We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.
Progress Bars: Default #2.01
Default progress styling.
Progress Bars: 5px #2.02
Custom progress styling. To use, add style="height: 5px;" to the base .progress class.
Progress Bars: 3px #2.03
Custom progress styling. To use, add style="height: 3px;" to the base .progress class.
Progress Bars: 1px #2.04
Custom progress styling. To use, add style="height: 1px;" to the base .progress class.
Progress Bars: 4px #2.05
Custom progress styling. To use, add style="height: 4px;" to the base .progress class.
Progress Bars: 2px #2.06
Custom progress styling. To use, add style="height: 2px;" to the base .progress class.
3.
Progress Bars Options
Options for Progress Bars with: Labels, Icons, Multiple Bars, Striped etc.
Progress Bars: Label #3.01
Add labels to your progress bars by placing text within the .progress-bar.
Progress Bars: Label Icon #3.02
Add labels to your progress bars by placing text within the .progress-bar.
Progress Bars: Multiple Bars #3.03
Include multiple progress bars in a progress component if you need.
Progress Bars: Striped #3.04
Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.
Progress Bars: Animated Striped #3.05
The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.
Progress Bars: Square Rounds #3.06
Custom progress styling. To use, add .r-0 to the base .progress class.
Progress Bars: Full Rounds #3.07
Custom progress styling. To use, add .r-30 to the base .progress class.
4.
Progress Bars Options
The most-used UI compositions in applications.
Progress Bars: Details Below #4.01
Custom example composition with CSS Flex.
Progress Bars: Details Above #4.02
Custom example composition with CSS Flex.
Progress Bars: Details Inline #4.03
Custom example composition with CSS Flex.