ui:spinner

A loading spinner to be used while the real component body is being loaded

To toggle the spinner, use get("e.toggle"), set the isVisible parameter to true or false, and then fire the event.

This example shows a spinner that can be toggled.

<aura:component access="global">
 <ui:spinner aura:id="spinner"/>
 <ui:button press="{!c.toggleSpinner}" label="Toggle Spinner" />
</aura:component>
({
    toggleSpinner: function(cmp) {
        var spinner = cmp.find('spinner');
        var evt = spinner.get("e.toggle");
        
    if(!$A.util.hasClass(spinner, 'hideEl')){
        evt.setParams({ isVisible : false });
     }		
    else {
        evt.setParams({ isVisible : true });
	}
    evt.fire();
    }
})

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 style to be attached to the component. This style is added in addition to base styles output by the component.
isVisible Boolean Specifies whether or not this spinner should be visible. Defaults to true.

Events

Event Name Event Type Description
toggle COMPONENT The event fired when the spinner is toggled.