lightning:progressBar

A lightning:progressBar component displays the progress of an operation from left to right, such as for a file download or upload.

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

This example loads the progress bar on rendering and rerendering of the component.

1<aura:component>
2    <aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
3    <aura:attribute name="progress" type="Integer" default="0"/>
4    <lightning:progressBar value="{!v.progress}"/>
5</aura: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.

1({
2    onRender: function (cmp) {
3        var interval = setInterval($A.getCallback(function () {
4            var progress = cmp.get('v.progress');
5            cmp.set('v.progress', progress === 100 ? clearInterval(interval) : progress + 10);
6        }), 200);
7    }
8})

Attributes