Lightning Spinner in LWC (Lightning Web Component)

 lightningSpinnerLWCSimpleExample.html

<template>

    <lightning-button label="Toggle" variant="brand"

onclick={handleClick}>

    </lightning-button>

    <div class="slds-m-around_large">

        <p if:true={isLoaded}>Content has been loaded.</p>

         <div if:false={isLoaded} class="slds-is-relative">

            <lightning-spinner

                alternative-text="Loading..." variant="brand">

            </lightning-spinner>

        </div>

    </div>

</template>




lightningSpinnerLWCSimpleExample.js




import { LightningElement, api } from 'lwc';

export default class LightningSpinnerLWCSimpleExample extends

LightningElement {

    @api isLoaded = false;

    // change isLoaded to the opposite of its current value

    handleClick() {

        this.isLoaded = !this.isLoaded;

    }

}




lightningSpinnerLWCSimpleExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>