Custom Component to show Loading Spinner in Lightning during Server or Client side Operations

We have created a lightning component which can be used to display Loading Spinner image whenever you perform any server side (apex method call) or some complex operation on client side (component controller).

How to use this component?

• Create a attribute in your component of boolean type to show and hide spinner.

<aura:attribute name="showSpinner" type="Boolean" default="false" />

• Add below component reference in your mark up. Here showSpinnerCmp is component name.

<c:showSpinnerCmp show="{!v.showSpinner}"/>

• In your controller just toggle the showSpinner value to true/false to display/hide spinner.

component.set("v.showSpinner",true); //to show spinner

component.set("v.showSpinner",false); //to hide spinner

You can find complete code for showSpinnerCmp component below.
You can now save this component and can used with any other component.



Hope this will help!!!

More Blogs>>: 

DYNAMICALLY CREATING AND DESTROYING LIGHTNING COMPONENTS    
RAISING AND HANDLING CUSTOM EVENTS IN sALESFORCE lIGHTNING    
WHY TO USE DESIGN RESOURCE AND HOW TO ADD DYNAMIC OPTION TO DATASOURCE    
PASSING INNER WRAPPER CLASS TO LIGHTNING COMPONENT    
LIGHTNING COMPONENT FOR RECORDTYPE SELECTION FOR ANY SOBJECT