Progress Indicator

progress-indicator

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

base

.slds-progress

base › In a modal

base › On a gray background

base › Legacy Markers

.slds-progress_shade

.slds-progress_shade — When on a shaded background such as the modal footer

.slds-progress__list

.slds-progress__list — An ordered list containing steps of a process

.slds-progress__list-bordered

.slds-progress__list-bordered — Add borders between progress items

.slds-progress__item

.slds-progress__item — A list item for each step of the process

.slds-is-completed

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

.slds-is-active

.slds-is-active — Stateful class for the active step

.slds-has-error

.slds-has-error — Indicates error state for a step in the progress

.slds-progress__item_content

.slds-progress__item_content — Support content in line with progress marker

.slds-progress__marker

.slds-progress__marker — Dot indicator for each step

.slds-progress__marker_icon

.slds-progress__marker_icon — Modifier that notifies the marker indicator that the step has been completed and its getting an icon

.slds-progress__marker_icon-success

.slds-progress__marker_icon-success — Turn completed stage checkmark green

vertical

.slds-progress_vertical

vertical › On a gray background

vertical › With a green success check

vertical › With varying stage sizes

vertical › With varying stage sizes and multiple completed steps

.slds-progress_success

.slds-progress_success — Creates a green bar for the vertical variant