Progress Bar

Basic Example

The default progress bar has no modifiers.

Label that is long test
Amount: 200
Total: 500

Simple Example

Label that is long test 40%

No Header / Rounded

Indeterminate Modifier

Uses the .progress-bar--indeterminate modifier for an animated loading state when the progress is unknown.

Loader Style

Uses the .progress-bar--loader modifier for a thin loading bar.

Completed Example

An example of a completed progress bar with an icon.

Progress
Item Completed
Amount: 500
Total: 500

Deficit Example

An example of a progress bar with a deficit.

Progress
Item Has Deficit
Amount: 300
Deficit: -100
Total: 500

Success Style

Uses the .progress-bar--success modifier.

Positive

Warning Style

Uses the .progress-bar--success modifier.

Positive

Danger Style

Uses the .progress-bar--danger modifier.

Negative

Small Modifier

Uses the .progress-bar--small modifier. Font sizing is controlled by the parent element.

Progress
Item Completed
Amount: 500
Total: 500
Progress
Item Has Deficit
Amount: 300
Deficit: -100
Total: 500

Icon left with rail

Combining with rail component for icon on left

Progress
Amount: 300
Deficit: -100
Total: 500