Salesforce Lightning Spinner

Below are the steps to use spinner with in a single component in Salesforce Lightning


1) Add below two lines of code in lightning component

    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:attribute name="instanceChanged" type="boolean" />

2) Add below <aura:if /> markup in the lightning component

<aura:if isTrue="{!v.instanceChanged}"> 
<div class="slds-spinner_container ">
<div role="status" class="slds-spinner slds-spinner--medium slds-spinner--brand">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
 </div>
</div>
</aura:if> 

3) Add below event to your lightning component. It depends on type of event you want to call the method. in my example iam calling the lightning controller methods on change event. You can call the method in click event or any other event you want and add below line of code to it

<ui:inputSelect class="dynamic" aura:id="inputSelectDynamic" change="{!c.instanceDetails}" />


4) Add below line of code in the instanceDetails method to unhide the spinner

       //Unhide the spinner
      
       component.set("v.instanceChanged",true);

5) Add below line of code to hide the spinner
   
 hideSpinner : function (component, event, helper) {
        //Hide the spinner
        component.set("v.instanceChanged",false);
    }

Please note, from above the hideSpinner method will be invoked when event doneWaiting is fired from step1