Progress Bar

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.

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(
4      $A.getCallback(function () {
5        var progress = cmp.get("v.progress");
6        cmp.set(
7          "v.progress",
8          progress === 100 ? clearInterval(interval) : progress + 10
9        );
10      }),
11      200
12    );
13  },
14});