About Progress Bar

Progress bars are used to show the completion progress of a task or process. They provide visual feedback to users about the status of ongoing operations.

Base

States

Examples

Vertical

Vertical States

Modifiers

Component API

<div class="slds-progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"> <span class="slds-progress-bar__value" style="width: 50%;"> <span class="slds-assistive-text">Progress: 50%</span> </span></div>

<div class="slds-progress-bar slds-progress-bar_descriptive" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-labelledby="progress-label" aria-describedby="progress-description"> <span class="slds-progress-bar__value" style="width: 75%;"> <span class="slds-assistive-text">Progress: 75%</span> </span> <div class="slds-progress-bar__labels"> <span class="slds-progress-bar__label" id="progress-label"> <span class="slds-progress-bar__label-left">Processing...</span> <span class="slds-progress-bar__label-right">75%</span> </span> <span class="slds-progress-bar__description" id="progress-description"> Step 3 of 4: Finalizing </span> </div></div>

Styling Hooks Overview

The progress bar component supports various styling hooks for customization. Key classes include:

• slds-progress-bar - Main progress bar container
• slds-progress-bar__value - Progress indicator
• slds-progress-bar_descriptive - Descriptive variant
• slds-progress-bar_vertical - Vertical orientation
• slds-progress-bar_circular - Rounded corners
• slds-progress-bar_success - Success state
• slds-progress-bar_x-small, slds-progress-bar_small, slds-progress-bar_medium, slds-progress-bar_large - Size variants