Custom Spinner in Salesforce LWC Using Pure CSS

Hi everyone in this blog we will learn about the customized salesforce spinners that you can use in your components and projects…..

Actual Spinner is Differ from this one, For This Change The CSS Part

1. Spinner in Lightning Web Component

First Create lightning web component Ex. customSpinnerInLWC

Files →

1. customSpinnerInLWC.html
2. customSpinnerInLWC.js
3. customSpinnerInLWC.css

customSpinnerInLWC.html

<template>
<h1> This is my Custom Spinner</h1>
<!--<ligtning-button onclick={showSpiiner} label="Show Spinner"></ligtning-button>-->
<template if:true ={isloading}>
Loading......
<div class="loader"></div>
</template>
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</template>

customSpinnerInLWC.js

import { LightningElement } from 'lwc';
export default class customSpinnerInLWC extends LightningElement {
isloading = false;
showSpinner(){
console.log("spinner");
if(!this.isloading){
console.log("spinner1");
this.isloading = true;
}else{
console.log("spinner2");
this.isloading = false;
}
}
}

In customSpinnerInLWC.css → It contains all the css for the spinner

.sk-chase {
width: 40px;
height: 40px;
position: relative;
animation: sk-chase 2.5s infinite linear both;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: red;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
@keyframes sk-chase {
100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}

That’s it, And It’s Done. I hope you found the post useful !!, Please hit the clap button & give your valuable feedback.

🎉🎉 Thanks a lot for reading till the end 🎉🎉

Feel free to reach out to me anytime .😊 Feedback and suggestions are Welcome .

Email: pradyumnsh007@gmail.com
LinkedIn: https://www.linkedin.com/in/pradyumn-sharma-59782a15a/
Github: https://github.com/sharmapradyumn