Show spinner component in LWC.

spinnerComponent.css

.backdrop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 7, 7, 0.5); /* background color while spinner onscreen */
  z-index: 15000; /* set z-index always high */
}

.spinshow::after {
  position: absolute;
  content: "Please wait while loading";
  width: 100%;
  text-align: center;
  top: calc(50% + 3em);
  font-weight: bold;
}

spinnerComponent.html

<template>
    <template if:true={showSpinner}>
        <div class="backdrop">
            <lightning-spinner class="spinshow" size="large" variant="brand" alternative-text="Loading">
            </lightning-spinner>
        </div>
    </template>
</template>

spinnerComponent.js

/* eslint-disable @lwc/lwc/no-async-operation */
import { LightningElement, track } from 'lwc';

export default class SpinnerComponent extends LightningElement {
    @track showSpinner = true;


    /* connectedCallback() {
        setTimeout(() => {
            this.showSpinner = false;
        }, 3000);
    } */
}