Lightning Components Developer 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 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. | |
| 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. |