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

` `

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

45.0 true lightning__AppPage lightning__RecordPage lightning__HomePage ` **Step 5:- Create Lightning Application : lwcSpinnerApp.app** ` ` **[→ Get source code live demo link:-](https://www.w3web.net/lwc-custom-lightning-spinner-show-hide-toggle/)**