Progressbar

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