Progressbar provide up-to-date feedback on the progress of a workflow or action with simple yet flexible bars.
Bootstrap Progressbar
This is the default progress bar provided by Bootstrap. You can also convert it to stripped, animated or stacked progressbar.
Propeller Progressbar
It consists of Bootstrap HTML structure enhanced with Propeller customized classes based on Material Standards. Include Propeller Static Progressbar to your code by adding .pmd-progress.
Striped Progressbar
Include Propeller Striped Progressbar to your code by adding .progress-striped besides .pmd-progress.
Animated Progressbar
Include Propeller Animated Progressbar to your code by adding .active beside .progress-striped.
Stacked Progressbar
Include Propeller Stacked Progressbar to your code by adding .progress-bar inside the wrapper div containing .pmd-progress.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the progressbar. The table lists the available classes and their effects.
| Propeller Class | Effect | Remark |
|---|---|---|
.progress |
Used to initialize static progress bar. | Required |
.pmd-progress |
Add this class to create propeller customized progress bar. | Required |
.progress-striped |
Used to add stripes to the progress bar. | Optional |
.active |
Add this class along with .progress-stripped to animate the progress bar. |
Optional |
.progress-bar |
Use this class to create a stacked progress bar. | Optional |