Progress Indicator

Progress Indicator

A progress indicator 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.

About Progress Indicator

The progress indicator communicates to the user which step of a process they may be on. The length of the progress bar can be changed by modifying the value on <progress class="slds-progress-bar" /> with JavaScript. The .slds-progress-bar accepts a range from 0% to 100%.

When a step becomes active, the .slds-progress__item should get the class .slds-is-active. This class should be applied through JavaScript. When the step is completed, the .slds-is-active class should be replaced with the class .slds-is-completed on .slds-progress__item. At that point, the .slds-progress__item element should receive a "success" icon, providing feedback that the step has been completed.


Overview of CSS Classes

Selector.slds-progress
Summary
Restrictdiv
VariantTrue
Selector.slds-progress_shade
Summary

When on a shaded background such as the modal footer

Restrict.slds-progress
ModifierTrue
Selector.slds-progress__list
Summary

An ordered list containing steps of a process

Restrict.slds-progress ol
Selector.slds-progress__item
Summary

A list item for each step of the process

Restrict.slds-progress ol li
Selector.slds-is-completed
Summary

Stateful class for a completed step, .slds-progress__item should receive a success icon at this point

Restrict.slds-progress__item
ModifierTrue
Selector.slds-is-active
Summary

Stateful class for the active step

Restrict.slds-progress__item
ModifierTrue
Selector.slds-has-error
Summary

Indicates error state for a step in the progress

Restrict.slds-progress__item
ModifierTrue
Selector.slds-progress__marker
Summary

Dot indicator for each step

Restrict.slds-progress ol li button
Selector.slds-progress__marker_icon
Summary

Modifier that notifies the marker indicator that the step has been completed and its getting an icon

Restrict.slds-progress__marker