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

Post Views: 4,997

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.

Don’t forget to check out:- Create a Custom Lightning Component for Show Approve/Reject Status of Selected Records through Modal Popup in Salesforce Lightning Component Click Here For More Information

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 lightning component.

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>  
        
        <br/><br/>
    <p><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong> <span style="font-size:15px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span> <a href="https://www.w3web.net/" target="_blank" style="text-decoration:none;" rel="noopener noreferrer">An easy way to learn step-by-step online free tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></p>

    </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>

<p><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong> <span style="font-size:15px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span> <a href="https://www.w3web.net/" target="_blank" style="text-decoration:none;" rel="noopener noreferrer">An easy way to learn step-by-step online free tutorial, To know more Click <span style="color:#ff8000; font-size:18px;">Here..</span></a></strong></p>

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

TechW3web:- To know more, Use this Link

Further post that would you like to learn in lightning component.

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

Author of w3web.net

Hi, This is Vijay 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

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

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.
Carter

May 4, 2021 at 6:57 am

Thanks for sharing the post. It’s very helpful…
buy Google voice number
buy twitter accounts
Buy Instagram pva accounts
Buy Facebook pva accounts
muhammad kashif bilal

July 23, 2021 at 1:29 pm

Thanks A Lot Sir For This

40 High Demand Gigs on Fiverr – Most Selling Gigs on Fiverr 2021
Fiona Xu

August 10, 2021 at 5:53 am

Amazing article, and I have learned a lot

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 | You May Also Like

Author of w3web.net

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

Leave a Comment Cancel reply