How to Show/Hide a Custom Loading Spinner Image in Salesforce Lightning Component

Post Views: 2,196

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

Other related post that would you like to learn in LWC

How to delete selected record on click button using deleteRecord of uiRecordApi in Lightning web component -LWC
How to create a custom form validation and display required Error message upon handle input change in Lightning web component – LWC
How to pass the color code value from a child LWC component to parent lightning aura component using LWC Custom Event & Dispatch Event
A small example of dispatch event where we define a custom event in child lightning web component and passing values from child component to parent component in — LWC
How to Communicate Between Parent to Child and Passing the Value from Parent Component to Child component in Lightning Web Component — LWC
Insert New Record in Custom Object and Navigate to the Record on Detail Page Using Apex class method in Lightning Web Component — LWC
How to Insert, Edit/Update record without apex class by help of the lightning data service using “lightning-record-form” in Lighting Web Component — LWC
Calling an apex method imperatively and fetching contact record from database without @wire and create lightning data-table

Step 1:- Create Lightning Application : spinnerCustomApp.app

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

spinnerCustomApp.app [Component Application File]

  <aura:application extends="force:slds">
    <c:spinnerCustomCmp/>
</aura:application>

<aura:application extends="force:slds">

<c:spinnerCustomCmp/>

</aura:application>

Step 2:- Create Lightning Component : spinnerCustomCmp.cmp

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

spinnerCustomCmp.cmp [Lightning Component File]

  <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="mySpinner" type="boolean" default="false"/>
    <div class="slds">
        
        <div class="slds-text-align--center slds-m-top--medium">
            <button class="slds-button slds-button--brand" onclick="{!c.spinnerAction}">Spinner Button</button>
        </div>
        
        <aura:if isTrue="{!v.mySpinner}">
            <div class="spinnerContainer">
                <span class="spinnerGif"><img src="https://www.w3web.net/wp-content/uploads/2020/08/loading.gif" width="180" height="180"/></span> 
            </div>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>          
        
    </div> 
</aura:component>

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<aura:attribute name="mySpinner" type="boolean" default="false"/>

<button class="slds-button slds-button--brand" onclick="{!c.spinnerAction}">Spinner Button</button>

</div>

<aura:if isTrue="{!v.mySpinner}">

</div>

</aura:if>

</div>

</aura:component>

Step 3:- Create Lightning Component : spinnerCustomCmpController.js

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

spinnerCustomCmpController.js [JavaScript Controller]

  ({
	spinnerAction : function(component, event, helper) {
        component.set("v.mySpinner",true);
        
        window.setTimeout(
                $A.getCallback(function() {
                     component.set("v.mySpinner",false);
                }), 5000
            );        
	},    
})

({

spinnerAction : function(component, event, helper) {

component.set("v.mySpinner",true);

window.setTimeout(

$A.getCallback(function() {

component.set("v.mySpinner",false);

}), 5000

);

})

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

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

spinnerCustomCmp.css [Style CSS]

  .THIS {
}
.THIS .spinnerContainer{width:100%; height:100%;}
.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;}
.THIS .slds-backdrop{background: rgba(126, 140, 153, 0.4); z-index:9;}

.THIS {

}

.THIS .spinnerContainer{width:100%; height:100%;}

.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;}

.THIS .slds-backdrop{background: rgba(126, 140, 153, 0.4); z-index:9;}

Further post that would you like to learn

5 thoughts on “How to Show/Hide a Custom Loading Spinner Image in Salesforce Lightning Component”

Sumon Chandra

October 2, 2020 at 7:30 am

very hellpful artcle and very nice loading system
pooja

October 3, 2020 at 4:57 am

it was really very usefull
thanks!!
pinjara khubsurti kaa

December 14, 2020 at 6:45 pm

You’re a beautiful inspiration. It really helps me in any situation. Where I stuck. Many of my friends told me to comment there post but I stuck what I should comment. Finally I got your post it always help me. Thanks for the lovely post.
Pakistan jobs

December 22, 2020 at 4:13 pm

Nice blog, you giving good information in this blog thanks
shimul

January 1, 2021 at 2:44 pm

Thanks for sharing the post. It’s very helpful.

Files we used in this post example:-

spinnerCustomApp.app [Component Application File]

spinnerCustomCmp.cmp [Lightning Component File]

spinnerCustomCmpController.js [JavaScript Controller]

spinnerCustomCmp.css [Style CSS]

Related Topics

5 thoughts on “How to Show/Hide a Custom Loading Spinner Image in Salesforce Lightning Component”

Leave a Comment Cancel reply

Please Contribute to Support If Some Value Added in Your Project or Website