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); } })
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. |