Progress Bar
lightning-progress-bar
Displays a horizontal progress bar from left to right to indicate the progress of an operation.
For Use In
Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline
A lightning-progress-bar component shows the progress of an operation from
left to right, such as for a file download or upload.
This example loads the progress bar when you click the Start button. The Start button becomes a Stop button when the progress bar is incrementing its value.
Here's the JavaScript that changes the value of the progress bar.
Specifying this.progress === 100 ? this.resetProgress() : this.progress + 10
increases the progress value by 10% and stops the animation when the progress
reaches 100%. The progress bar is updated every 200 milliseconds.
lightning-progress-bar implements the progress bar blueprint in the Salesforce Lightning Design System (SLDS). The progress bar adapt to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.
| SLDS 1 | SLDS 2 | |
|---|---|---|
| Design | Progress Bars | Progress Bars |
| For Use In | Lightning Experience, Experience Builder sites, Salesforce mobile app, Lightning Out (Beta), Standalone Lightning app, Mobile Offline | Lightning Experience |
Use a combination of variants, sizes, and utility classes to customize the progress bar.
Specify the variant attribute using one of these values.
baseis the default variant, which shows a rectangular progress barcircularshows a progress bar with rounded ends
Adjust the progress bar sizes by using the size attribute with one of these values.
x-smallcreates a progress bar with a height of 2pxsmallcreates a progress bar with a height of 4pxmediumis the default variant, which creates a progress bar with a height of 8pxlargecreates a progress bar with a height of 12px
To apply additional styling, use the SLDS utility classes with the class attribute.