Progressbar provide up-to-date feedback on the progress of a workflow or action with simple yet flexible bars.
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
.
Include Propeller Striped Progressbar to your code by adding .progress-bar-striped
besides .progress-bar
.
Include Propeller Animated Progressbar to your code by adding .progress-bar-animated
and .active
besides .progress-bar-stripped
.
Include Propeller Stacked Progressbar to your code by adding .progress-bar
inside the wrapper div containing .pmd-progress
.
Set a height
value on the .progress
to resize the progress bar.
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 |
.progress-bar |
Used to indicate the progress so far. | Required |
.pmd-progress |
Add this class to create propeller customized progress bar. | Required |
.progress-bar-striped |
Used to add stripes to the progress bar. | Optional |
.progress-bar-animated |
Add this class besides .progress-bar-striped to create an animated the progress bar. |
Optional |
.active |
Add this class besides .progress-bar-animated to manually initialize the animation. |
Optional |