Toogle the spinner or processing symbol in Lightning Component Salesforce

The below example explain about the way of Loading spinner or processing symbol in Lightning Component.

This can be done by using ui:spinner tag. Here is the sample code,

Step 1:
Create a Apex Class with the below code snippet,

1. public class OpportunityController {
2.     @AuraEnabled
3.     public static List<Opportunity> getOpportunities() {
4.         List<Opportunity> opportunities =
5.                 [SELECT Id, Name, CloseDate FROM Opportunity LIMIT 1000];
6.         return opportunities;
7.     }
8. }

Step 2:

Create a lightning component with the below code snippet. Controller attribute in the aura:component refers the apex class.

1. <aura:component controller="OpportunityController">
2.     <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
3.     <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
4.    
5.     <aura:attribute name="opportunities" type="Opportunity[]"/>
6.     <center>
7.         <ui:button label="Get Opportunities" press="{!c.getOpps}"/> <br/> <br/>
8.         <ui:spinner aura:id="spinner" />
9.        
10.         <aura:If isTrue="{!v.opportunities.length > 0}">
11.             <SPAN>
12.                 <aura:iteration var="opportunity" items="{!v.opportunities}">
13.                     <p>{!opportunity.Name} : {!opportunity.CloseDate}</p> <br/>
14.                 </aura:iteration>
15.             </SPAN>
16.         </aura:If>
17.     </center>
18. </aura:component>

1. Used aura handler with event aura:waiting and aura:doneWaiting to handle spinning process.

2. ui:spinner tag indicates the processing or spinner symbol.

Step 3:

Double click on CONTROLLER from the side bar in lightning component editor and paste the below java script snippet.

1. ({
2.    
3.     showSpinner : function (component, event, helper) {
4.         var spinner = component.find('spinner');
5.         var evt = spinner.get("e.toggle");
6.         evt.setParams({ isVisible : true });
7.         evt.fire();    
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.     getOpps: function(cmp){
16.         var action = cmp.get("c.getOpportunities");
17.         action.setCallback(this, function(response){
18.             var state = response.getState();
19.             if (state == "SUCCESS") {
20.                 cmp.set("v.opportunities", response.getReturnValue());
21.             }
22.         });
23.         $A.enqueueAction(action);
24.     }
25. })

Note:

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

2. The above example shows a spinner when a component is expecting a server response.

Output:

Reference:

ui:spinner