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