Lightning Components Developer's Guide
jNewer Version Available
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 when a component is expecting a server response and removes the spinner when the component is no longer waiting for a response.
1<aura:component>
2 <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
3 <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
4
5 <center><ui:spinner aura:id="spinner"/></center>
6</aura:component>This client-side controllers shows and hides the spinner accordingly.
1({
2 showSpinner : function (component, event, helper) {
3 var spinner = component.find('spinner');
4 var evt = spinner.get("e.toggle");
5 evt.setParams({ isVisible : true });
6 evt.fire();
7 },
8
9 hideSpinner : function (component, event, helper) {
10 var spinner = component.find('spinner');
11 var evt = spinner.get("e.toggle");
12 evt.setParams({ isVisible : false });
13 evt.fire();
14 }
15})This example shows a spinner that can be toggled.
1<aura:component access="global">
2 <ui:spinner aura:id="spinner"/>
3 <ui:button press="{!c.toggleSpinner}" label="Toggle Spinner" />
4</aura:component>1({
2 toggleSpinner: function(cmp) {
3 var spinner = cmp.find('spinner');
4 var evt = spinner.get("e.toggle");
5
6 if(!$A.util.hasClass(spinner, 'hideEl')){
7 evt.setParams({ isVisible : false });
8 }
9 else {
10 evt.setParams({ isVisible : true });
11 }
12 evt.fire();
13 }
14})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. | |
| isVisible | Boolean | Specifies whether or not this spinner should be visible. Defaults to true. |
Events
| Event Name | Event Type | Description |
|---|---|---|
| toggleLoadingIndicator | COMPONENT | Change the visibility of a ui:spinner component. |