Custom Spinner in Lightning Web Component(lwc)

 This post explains how to create a custom spinner in lightning web components(lwc)

HTML Code

<template>
   <lightning-card>
      <div align="center"  if:true={isSpinner}>
         <div class="loader"></div>
         Please wait...
      </div>
      <div align="center" if:true={showButon}>
         <lightning-button label="Enable Spinner" variant="brand" onclick={enableSpinner}>
         </lightning-button>
      </div>
   </lightning-card>
</template>

JS Code

import {
    LightningElement
} from 'lwc';
export default class Customspinner extends LightningElement {
    isSpinner = false;
    showButon = true;

    enableSpinner() {
        if (!this.isSpinner) {
            this.isSpinner = true;
            this.showButon = false;
        }
    }
}

CSS Code

.loader {
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #3498db;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Output