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.



<aura:component >

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

<aura:handler name="change" value="{!v.show}" action="{!c.spinnerDisplayHandler}"/>

<div class="slds-align--absolute-center">

<lightning:spinner aura:id="spinner" variant="brand" size="large" class="slds=hide"/>

</div>

</aura:component>



--------------------------------------------------------------------------------

({

spinnerDisplayHandler : function(component, event, helper) {

console.log('show spinner value changes');

helper.showHideSpinner(component);

}

})

-----------------------------------------------------------------------------------

({

showHideSpinner : function(component) {

var showValue = component.get('v.show');

if(showValue) {

console.log('showValue'+showValue);

var spinner = component.find("spinner");

console.log('spinner'+spinner);

$A.util.removeClass(spinner, "slds-hide");

} else {

console.log('showValue'+showValue);

var spinner = component.find("spinner");

console.log('spinner'+spinner);

$A.util.addClass(spinner, "slds-hide");

}

}

})