Progress Bar

Progress Bar

A progress bar component communicates to the user the progress of a particular process.

Base

Preview

No content has been added for this component.

No content has been added for this component.

Overview of CSS Classes

Selector.slds-progress-bar
Summary
Restrictdiv
VariantTrue
Selector.slds-progress-bar_x-small
Summary

Creates a progress bar height at the smaller .125rem (2px) size

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar_small
Summary

Creates a progress bar height at the smaller .25rem (4px) size

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar_medium
Summary

Creates a progress bar height at the smaller .5rem (8px) size

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar_large
Summary

Creates a progress bar height at the smaller .75rem (12px) size

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar_circular
Summary

Adds a border radius to the progress bar to give it a circular look

Restrict.slds-progress-bar
ModifierTrue
Selector.slds-progress-bar__value
Summary

Fill up blue bar inside of the progress bar

Restrict.slds-progress-bar span
Selector.slds-progress-bar__value_success
Summary

Create a green progress bar

Restrict.slds-progress-bar__value
ModifierTrue