lightning:spinner

Displays an animated spinner.

A lightning:spinner displays an animated spinner image to indicate that a feature is loading. This component can be used when retrieving data or anytime an operation doesn't immediately complete.

The variant attribute changes the appearance of the spinner. If you set variant="brand", the spinner matches the Lightning Design System brand color. Setting variant="inverse" displays a white spinner. The default spinner color is dark blue.

This component inherits styling from spinners in the Lightning Design System.

Here is an example.

<aura:component>
    <lightning:spinner variant="brand" size="large"/>
</aura:component>
        

lightning:spinner is intended to be used conditionally. You can use aura:if or the Lightning Design System utility classes to show or hide the spinner.

<aura:component>
    <lightning:button label="Toggle" variant="brand" onclick="{!c.toggle}"/>
    <div>
        <lightning:spinner aura:id="mySpinner" />
    </div>
</aura:component>

This client-side controller toggles the slds-hide class on the spinner.

({
    toggle: function (cmp, event) {
        var spinner = cmp.find("mySpinner");
        $A.util.toggleClass(spinner, "slds-hide");
    }
})

Attributes

Attribute Name Attribute Type Description Required?
alternativeText String The alternative text used to describe the reason for the wait and need for a spinner.
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.
size String The size of the spinner. Accepted sizes are small, medium, and large. This value defaults to medium.
title String Displays tooltip text when the mouse moves over the element.
variant String The variant changes the appearance of the spinner. Accepted variants are base, brand, and inverse. This value defaults to base.