Progress Indicator

Progress Indicator

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

Base

Preview

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

No content has been added for this component.

No content has been added for this component.