Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Flint LockwoodFlint Lockwood 

Display and Hiding Loading Spinner in Salesforce Lightning

I am using the spinner from Salesforce Lightning Design System. The spinner displays on inital page load. However, the spinner never disappears. I am using the aura:waiting and aura:doneWaiting event to call the following controllor logic respectively. 
showSpinner : function (component, event, helper) {
       var spinner = component.find('spinner');        
       $A.util.toggleClass(spinner, "toggle") ;  
    },
    
    hideSpinner : function (component, event, helper) {
       var spinner = component.find('spinner');
        $A.util.toggleClass(spinner, "toggle")   
    },
Please let me know what I am doing wrong. 
 
Best Answer chosen by Flint Lockwood
sfdcMonkey.comsfdcMonkey.com
hi Flint Lockwood
here is the easy way to doing this
component 
<aura:component controller="test">
  <ltng:require styles="{! $Resource.SLDS_2_1_4 + '/assets/styles/salesforce-lightning-design-system.css'}"/>   
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:attribute name="toggleSpinner" type="boolean" default="false"/> 
    
<aura:if isTrue="{!v.toggleSpinner}">
 <div class="slds-spinner_container">
  <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
    <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>
controller 
({
	doInit : function(component, event, helper) {
	// work on component init..
       
	},
 
    showSpinner : function(component,event,helper){
      // display spinner when aura:waiting (server waiting)
        component.set("v.toggleSpinner", true);  
      },
    hideSpinner : function(component,event,helper){
   // hide when aura:downwaiting
        component.set("v.toggleSpinner", false);
        
    }
})
style (for make spinner fix and use z-index for make spinner alwasy front/top) 
.THIS.slds-spinner_container {
  z-index: 10000;
  position: fixed;
   
}
thanks
let me inform if my answer helps you
 :)



 

All Answers

sfdcMonkey.comsfdcMonkey.com
hi Flint Lockwood
here is the easy way to doing this
component 
<aura:component controller="test">
  <ltng:require styles="{! $Resource.SLDS_2_1_4 + '/assets/styles/salesforce-lightning-design-system.css'}"/>   
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:attribute name="toggleSpinner" type="boolean" default="false"/> 
    
<aura:if isTrue="{!v.toggleSpinner}">
 <div class="slds-spinner_container">
  <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
    <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>
controller 
({
	doInit : function(component, event, helper) {
	// work on component init..
       
	},
 
    showSpinner : function(component,event,helper){
      // display spinner when aura:waiting (server waiting)
        component.set("v.toggleSpinner", true);  
      },
    hideSpinner : function(component,event,helper){
   // hide when aura:downwaiting
        component.set("v.toggleSpinner", false);
        
    }
})
style (for make spinner fix and use z-index for make spinner alwasy front/top) 
.THIS.slds-spinner_container {
  z-index: 10000;
  position: fixed;
   
}
thanks
let me inform if my answer helps you
 :)



 
This was selected as the best answer
Flint LockwoodFlint Lockwood
Thank you!
Peter Wells 4Peter Wells 4
If you need the spinner to not show on initial page load, you need only add the correct class to the tag in your component like below. After that toggling the class will work as expected. 
<lightning:spinner aura:id="busyIndicator" variant="brand" size="large" class="slds-hide"/>

 
Carl Porch 17Carl Porch 17
My solution, I think is a bit simpler:

Step 1:  Put the following code anywhere you want the Spinner to appear -- such as just below the Command Button:
    <div id="spinner">
        <p align="center" 
           style='{font-family:"Arial", Helvetica, sans-serif; font-size:20px;}'>
            <apex:image value="/img/loading.gif"/>&nbsp;Please wait -- record is updating! --</p>
    </div>    
 
Step 2:  Initially hide the Spinner --
             <body onload="document.getElementById('spinner').style.display = 'none'">
 
Step 3:  Show the Spinner when the appropriate CommandButton is clicked:
             <apex:commandButton action="{!Book_It}" value="  Book It  " style="font-size: 20px;" onclick="document.getElementById('spinner').style.display = 'block'"/>