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 when a component is expecting a server response and removes the spinner when the component is no longer waiting for a response.
<aura:component> <aura:handler event="aura:waiting" action="{!c.showSpinner}"/> <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/> <center><ui:spinner aura:id="spinner"/></center> </aura:component>
This client-side controllers shows and hides the spinner accordingly.
({ showSpinner : function (component, event, helper) { var spinner = component.find('spinner'); var evt = spinner.get("e.toggle"); evt.setParams({ isVisible : true }); evt.fire(); }, hideSpinner : function (component, event, helper) { var spinner = component.find('spinner'); var evt = spinner.get("e.toggle"); evt.setParams({ isVisible : false }); evt.fire(); } })
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(); } })
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. |
Event Name | Event Type | Description |
---|---|---|
toggle | COMPONENT | The event fired when the spinner is toggled. |