Example of custom lightning spinner Show/Hide & Toggle on click button with display a modal popup open/close Uses of “lightning-spinner” elements in Salesforce Lightning Web Component

[vijayk3327]

In this post we are going to learn about How to custom lightning spinner Show/Hide & Toggle on click button with display a modal popup open/close Uses of “lightning-spinner” elements in Salesforce Lightning Web Component Salesforce.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component HTML ➡ lwcSpinner.html

`

Display Spinner as Show/Hide and Toggle in Lightning Web Component (LWC)

`

Step 2:- Create Lightning Web Component Javascript ➡ lwcSpinner.js

` import { LightningElement, api } from 'lwc';

export default class LwcSpinner extends LightningElement {
@api spinnerStatus = false;

toggleSpinner() {
    this.spinnerStatus = !this.spinnerStatus;
}

showSpinner() {
    this.spinnerStatus = true;
}

hideSpinner() {
    this.spinnerStatus = false;
}

}`

Step 3:- Create Custom Style CSS ➡ lwcSpinner.css

btnOverw3web{ position: absolute; z-index: 9999; display: block; }

Step 4:- Create Lightning Web Component Meta XML ➡ lwcSpinner.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>

Step 5:- Create Lightning Application : lwcSpinnerApp.app

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

→ Get source code live demo link:-