Custom Loader Image in Lightning Component

When using lightning component you can use the standard build in spinner easily. But what if you want to use custom image? As you will find out in this post, it is also quite easy.

Just follow those steps:
1.Find the image you want to use. There are plenty of free site were you can search nice gif and download the one that suite you (for example: http://icon-library.com/icon/loading-icon-animated-gif-26.html)
After downloading the file upload it in Salesforce as static resource.

2.In your lightning component add 2 things
First, add boolean variable 'showLoader'. This will be used to turn on and off the loader

 <aura:attribute name="showLoader" type="boolean" default="false" />  

Second, add section that show the loader image itself.
LoadingProgress is the name of the static resource, therefore rename it if you used different name.

 <aura:if isTrue="{!v.showLoader}">  
     <section role="dialog" aura:id="modalBlockUI" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">  
       <div class="slds-modal__container">  
         <div class="slds-modal__content slds-p-around_medium" style="background-Color: transparent; border: 0;">  
           <img src="{!$Resource.LoadingProgress}" />  
         </div>  
       </div>  
           </section>      
     <div class="slds-backdrop slds-backdrop--open" aura:id="customModal-Back"></div>  
   </aura:if>  

3.Whenever you call server function from the controller, you should first set the showLoader variable as true and once complete (usually it will be in the callback) set it back to false.

For example:

 ({  
     sendOpportunityAlert : function(component, event, helper) {  
     component.set("v.showLoader", true);  
     var oppAlertAction = component.get("c.sendAlert");  
     oppAlertAction.setParams({"oppId" : component.get("v.recordId")});  
     oppAlertAction.setCallback(this, function(response){  
       component.set("v.showLoader", false);    
     });  
     $A.enqueueAction(oppAlertAction);  
      }  
 })  

In the demo example, I simply added lightning component with button 'Send Alert' on opportunity layout. Pressing the button start the loader.