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 displays the progress of an operation from left to right, such as for a file download or upload.

This component implements styling from progress bars in the Lightning Design System.

This example loads the progress bar when you click a Start/Stop button.

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.