Progress Bar

progress-bar

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

base

.slds-progress-bar

base › Descriptive Progress Bar

base › Circular

base › X-Small Thickness

base › Small Thickness

base › Medium Thickness

base › Large Thickness

.slds-progress-bar_x-small

.slds-progress-bar_x-small — Creates a progress bar height at the smaller .125rem (2px) size

.slds-progress-bar_small

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

.slds-progress-bar_medium

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

.slds-progress-bar_large

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

.slds-progress-bar_circular

.slds-progress-bar_circular — Adds a border radius to the progress bar to give it a circular look

.slds-progress-bar__value

.slds-progress-bar__value — Fill up blue bar inside of the progress bar

.slds-progress-bar__value_success

.slds-progress-bar__value_success — Create a green progress bar

vertical

.slds-progress-bar_vertical — Create a vertical progress bar