How to Show & Hide Lightning Spinner in Salesforce

Spinner is component loading indicator that should be shown when retrieving data or performing slow computations or server operations. Spinner needs to be stop displaying after operations.


 we can get spinners in two ways.

1. with standard events like aura:waiting & aura:doneWaiting : We can use this when spinner needs to be shown when all server operations means calling apex classes and receiving response.

 2. With custom events: We use this type when we need to show spinner when event occurs only like 'I need to show Spinner when user clicks on Save button'. For this we need to to define on Boolean attribute to rendering spinner.

Show & Hide Lightning Spinner Example:

Spinner.cmp

<aura:component >
    <aura:attribute name="showSpinner" type="Boolean"/>
    <lightning:button variant="brand" label="cancel" onclick="{!c.cancel }" />
    <lightning:button variant="brand" label="Show Spinner" onclick="{!c.Show}" />
    <aura:if isTrue="{!v.showSpinner}">
        <div class="demo-only" >
            <div role="status" class="slds-spinner slds-spinner_large 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>
</aura:component>

SpinnerController.js

({
Show : function(component, event, helper) {
  component.set("v.showSpinner",true);
  },
cancel : function(component, event, helper) {
   component.set("v.showSpinner", false);
   }
}) 

OutPut:

Subjects:

Lightning Component Basics Lightning Components Salesforce Lightning Tutorials for beginers

Share This: