Progress Bar

lightning:progressBar

Displays a horizontal progress bar from left to right to indicate the progress of an operation. This component requires API version 41.0 and later.

For Aura components only. For LWC development, use lightning-progress-bar.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

A lightning:progressBar 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 on rendering and rerendering of the component.

Here’s the client-side controller that changes the value of the progress bar. Specifying progress === 100 ? clearInterval(interval) : 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.