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

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

You can download file directly from github by Click Here.

👉 Download Ebook →

👉 Download App from Google Play →

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]

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

```
    <c:spinnerCustomCmp/>
```
```
</aura:application>
```

Step 2:- Create Lightning Component : spinnerCustomCmp.cmp

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

✪ The Big Announcement: -
As per student's demands, I re-opened my eBook of "Salesforce Tutorial" Limited-time huge discount offer Absolutely 50% Off.
I am thinking to give you discount offer occasion of Gandhi Jayanti for a powerful "Salesforce admin course" where you can Understand from Basic Concepts to advanced label in Salesforce.
👉 So Don't MISS it... (Access Right Now)
👉 Get Huge Discount Offer 50%: - Get eBook

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

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

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

```
 
```
```
            <br/><br/>
```

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

            <div style="display:block; overflow:hidden;">

                <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

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

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

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

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

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

```
                    </ul>
```
```
            </div>
```
```
 
```

            <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

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

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

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

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

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

```
                    </ul>
```
```
                </div>
```

               <div style="clear:both;"></div>

```
               <br/>
```

                <div class="youtubeIcon">

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

```
                </div>
```
```
    </div>
```
```
 
```
```
</div>
```
```
 
```
```
  
```
```
 
```
```
    </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
```
```
            );        
```
```
	},    
```
```
})
```

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

TechW3web:- To know more, Use this Link

Further post that would you like to learn in Salesforce

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

TechW3web:- To know more, Use this Link

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.