Progressbar
Bootstrap 4 Progressbar with Material Design UI
Progressbar provide up-to-date feedback on the progress of a workflow or action with simple yet flexible bars.
Bootstrap 4 Progressbar
This is the default progress bar provided by Bootstrap 4. You can also convert it to stripped, animated or stacked progressbar.Propeller Progressbar
It consists of Bootstrap 4 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-bar-striped besides .progress-bar.
Animated Progressbar
Include Propeller Animated Progressbar to your code by adding .progress-bar-animated and .active besides .progress-bar-stripped.
Stacked Progressbar
Include Propeller Stacked Progressbar to your code by adding .progress-bar inside the wrapper div containing .pmd-progress.
Height of Progressbar
Set a height value on the .progress to resize the progress bar.
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 |
.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 |