How to Show/Hide a Custom Loading Spinner Image in Salesforce Lightning Component | how to add a spinner to the lightning component Salesforce

2,321 views


Hey guys, today in this post we are going to learn about how to show and hide a “Custom Loading Spinner Image” as Clint Side in Salesforce Lightning Component.

Files we used in this post example:-

spinnerCustomApp.app Lightning Application It is used for call the component to preview on browser.

spinnerCustomCmp.cmp

Lightning Component It is used for create a spinner button and modal popup for display a spinner image.

spinnerCustomCmpController.js

JavaScript Controller File It is used for click button function for show and hide the custom loading spinner image.
spinnerCustomCmp.css Component Style CSS It is used for create customΒ Style CSSΒ for display the spinner image at middle of the page.

Live Demo

custom spinner in lightning component -- w3web.net

 

You can download file directly from github by Click Here.

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
   

 

 

Other related post that would you like to learn in Salesforce

 

Step 1:- Create Lightning Application : spinnerCustomApp.app

From Developer Console >> File >> New >> Lightning Application

spinnerCustomApp.app [Component Application File]

  1.   <aura:application extends="force:slds">
  2.     <c:spinnerCustomCmp/>
  3. </aura:application>

Step 2:- Create Lightning Component : spinnerCustomCmp.cmp

From Developer Console >> File >> New >> Lightning Component

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
   

spinnerCustomCmp.cmp [Lightning Component File]

  1.   <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
  2.     <aura:attribute name="mySpinner" type="boolean" default="false"/>
  3.     <div class="slds">
  4.  
  5.         <div class="slds-text-align--center slds-m-top--medium">
  6.             <button class="slds-button slds-button--brand" onclick="{!c.spinnerAction}">Spinner Button</button>
  7.         </div>
  8.  
  9.         <aura:if isTrue="{!v.mySpinner}">
  10.             <div class="spinnerContainer">
  11.                 <span class="spinnerGif"><img src="https://www.w3web.net/wp-content/uploads/2020/08/loading.gif" width="180" height="180"/></span> 
  12.             </div>
  13.             <div class="slds-backdrop slds-backdrop_open"></div>
  14.         </aura:if>  
  15.  
  16.         <br/> <br/>
  17.    <!--Start RelatedTopics Section-->
  18. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  19.  
  20.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>
  21.  
  22.             <br/><br/>
  23.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like β†’</span> </strong></p>
  24.             <div style="display:block; overflow:hidden;"> 
  25.                 <div style="width: 50%; float:left; display:inline-block">
  26.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  27.                         <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
  28.                         <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
  29.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
  30.                         <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
  31.                         <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
  32.                     </ul>
  33.             </div>
  34.  
  35.             <div style="width: 50%; float:left; display:inline-block">
  36.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  37.                         <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
  38.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
  39.                         <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
  40.                         <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
  41.                         <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
  42.                     </ul>
  43.                 </div>
  44.                <div style="clear:both;"></div> 
  45.                <br/>
  46.                 <div class="youtubeIcon">
  47.                     <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
  48.                 </div>
  49.     </div>
  50.  
  51. </div>
  52.  
  53.   <!--End RelatedTopics Section-->
  54.  
  55.     </div> 
  56. </aura:component>

Step 3:- Create Lightning Component : spinnerCustomCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

spinnerCustomCmpController.js [JavaScript Controller]

  1.   ({
  2. 	spinnerAction : function(component, event, helper) {
  3.         component.set("v.mySpinner",true);
  4.  
  5.         window.setTimeout(
  6.                 $A.getCallback(function() {
  7.                      component.set("v.mySpinner",false);
  8.                 }), 5000
  9.             );        
  10. 	},    
  11. })

Step 4:- Create Lightning Component Style: spinnerCustomCmp.css

From Developer Console >> File >> New >> Lightning Component >> Component Style CSS

spinnerCustomCmp.css [Style CSS]

  1.   .THIS {
  2. }
  3. .THIS .spinnerContainer{width:100%; height:100%;}
  4. .THIS .spinnerContainer .spinnerGif{width:180px; height:180px; display:inline-block; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; z-index:99;}
  5. .THIS .slds-backdrop{background: rgba(126, 140, 153, 0.4); z-index:9;}

custom spinner image in lightning component -- w3web.net

 

Further post that would you like to learn in Salesforce

 

 


 

FAQ (Frequently Asked Questions)

How do you put a spinner in the lightning component?

When the user click on the get Contact button, a server request create by js controller and aura:waiting event fired automatically . and call the showSpinner function on client side controller. showSpinner js function set the spinner attribute to true on component and the loading spinner is display on component body.

What is spinner in Salesforce lightning?

A lightning-spinner displays an animated spinner image to indicate that a feature is loading. This component can be used when retrieving data or anytime an operation doesn't immediately complete. The variant attribute changes the appearance of the spinner.

How do you hide the spinner in the lightning component?

lightning:spinner is intended to be used conditionally. You can use aura:if or the Lightning Design System utility classes to show or hide the spinner. This client-side controller toggles the slds-hide class on the spinner.

Related Topics | You May Also Like

 
Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 
  

Our Free Courses β†’

πŸ‘‰ Get Free Course β†’

πŸ“Œ Salesforce Administrators

πŸ“Œ Salesforce Lightning Flow Builder

πŸ“Œ Salesforce Record Trigger Flow Builder

πŸ‘‰ Get Free Course β†’

πŸ“Œ Aura Lightning Framework

πŸ“Œ Lightning Web Component (LWC)

πŸ“Œ Rest APIs Integration



Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

Leave a Comment