Dashboard
- Dashboard
- UI-Progressbar
Basic Progress Bar
To create a default progress bar,add a .progressclass to a <div>element:
70% Complete
Progress Bar With Label
Remove the .sr-onlyclass from the progress bar to show a visible percentage:
70%
Colored Progress Bars
The contextual classes that can be used with progress bars are .progress-bar-primary,.progress-bar-success,.progress-bar-info,.progress-bar-danger,
40% Complete(primary)
40% Complete(success)
50% Complete(info)
60% Complete(warning)
70% Complete(danger)
Striped Progress Bars
Add class .progress-bar-stripedto add stripes to the progress bars:
40% Complete(primary)
40% Complete(success)
50% Complete(info)
60% Complete(warning)
70% Complete(danger)
Animated Progress Bar
Add class .activeto animate the progress bar:
40%
40%
50%
60%
70%
Stacked Progress Bars
Create a stacked progress bar by placing multiple bars into the same <div class="progress">:
Free Space
Warning
Danger
This dashboard was generated on bootstrapmb