Spinner in Lightning Component.

How to show Spinner in lightning component :-

In lightning component spinner is very important to intimate user that some process is going on.

To add a spinner in lightning component follow these steps : -

Step 1 : 

In your lightning component cmp file add these handler below : 

 <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>

 <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>

These above handler we have to declare if we want to use spinner in our component. As you can see there are action attribute in handler in which I am calling a method in controller.

Step 2 :
Add UI Spinner underneath of your control in which you want to show the spinner as shown below :

<ui:spinner aura:id="spinner"/> 

Step 3 :

Open your controller and paste the below code in it : 

// automatically call when the component is done waiting for a response to a server request.  

    hideSpinner : function (component, event, helper) {

       

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

        var evt = spinner.get("e.toggle");

        evt.setParams({ isVisible : false });

        evt.fire();    

    },

    // automatically call when the component is waiting for a response to a server request.

    showSpinner : function (component, event, helper) {

        

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

        var evt = spinner.get("e.toggle");

        evt.setParams({ isVisible : true });

        evt.fire();    

    }, 

In above code as you can see we are calling spinner toggle event to show & hide spinner. As in my case I am using the spinner in a lookup field in lightning component.
Here are screenshot below :

Share this blog with your friends if this article helps you somehow.