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.

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.

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

({
    onRender: function (cmp) {
        var interval = setInterval($A.getCallback(function () {
            var progress = cmp.get('v.progress');
            cmp.set('v.progress', progress === 100 ? clearInterval(interval) : progress + 10);
        }), 200);
    }
})

Attributes

Attribute Name Attribute type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS class for the outer element, in addition to the component's base classes.
title String Displays tooltip text when the mouse moves over the element.
variant String The variant of the progress bar. Valid values are base and circular.
value Integer The percentage value of the progress bar.
size String The size of the progress bar. Valid values are x-small, small, medium, and large. The default value is medium.