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

First Create lightning web component Ex. customSpinnerInLWC

Files →

  1. customSpinnerInLWC.html
  2. customSpinnerInLWC.js
  3. customSpinnerInLWC.css
<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>
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;}}}
.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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pradyumn Sharma

Aesthetic Programmer | Salesforce Developer | Tech Blogger | Life 👨‍💻|🏋 | 🏏| Follow for more tech tips & tricks blogs that will improve your day to day life