custom Loading Spinner image in Lightning Component -- w3web.net

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

209 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

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]

Step 2:- Create Lightning Component : spinnerCustomCmp.cmp

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

spinnerCustomCmp.cmp [Lightning Component File]

Step 3:- Create Lightning Component : spinnerCustomCmpController.js

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

spinnerCustomCmpController.js [JavaScript Controller]

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

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

spinnerCustomCmp.css [Style CSS]

custom spinner image in lightning component -- w3web.net

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

 


 

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

  • Your reaction of the article ▾
 

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

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

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

    Reply

Leave a Comment