How to show a custom spinning image in Lightning Component Salesforce

The below example explain about the way of loading custom spinning or processing image in Lightning Component. 

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.     <aura:attribute name="opportunities" type="Opportunity[]"/>
5.     <aura:attribute name="showSpinnerImage" type="Boolean"/>
6.    
7.     <center>
8.         <ui:button label="Get Opportunities" press="{!c.getOpps}"/> <br/> <br/>
9.        
10.         <aura:renderIf isTrue="{!v.showSpinnerImage}">
11.             <img src="https://media.giphy.com/media/npCmk0VCFHyUM/giphy.gif"/>
12.             <aura:set attribute="else">
13.                 <aura:iteration var="opportunity" items="{!v.opportunities}">
14.                     <p>{!opportunity.Name} : {!opportunity.CloseDate}</p> <br/>
15.                 </aura:iteration>
16.             </aura:set>
17.         </aura:renderIf>
18.     </center>
19. </aura:component>

Custom spinning image dynamically rendered using aura:renderIf tag.

Step 3:

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

1. ({
2.     showSpinner : function (component, event, helper) {
3.         component.set("v.showSpinnerImage", true);
4.     },
5.     hideSpinner : function (component, event, helper) {
6.         component.set("v.showSpinnerImage", false);    
7.     },
8.     getOpps: function(cmp){
9.         var action = cmp.get("c.getOpportunities");
10.         action.setCallback(this, function(response){
11.             var state = response.getState();
12.             if (state == "SUCCESS") {
13.                 cmp.set("v.opportunities", response.getReturnValue());
14.             }
15.         });
16.         $A.enqueueAction(action);
17.     }
18. })

Output: