Lightning Spinner - Reusable lightning spinner with custom message or text

This is an extension of the standard lightning-spinner with a custom message shown along with the spinner. It supports all of the features supported by lightning-spinner along with the custom message which is supported for sizes small, medium and large only. Default values: size="medium" variant="base" message="Loading..."

Use this in any lightning component like below.

<c-spinner variant="brand"></c-spinner>

<c-spinner size="large" message="Saving..."></c-spinner>

<c-spinner size="small" variant="inverse"></c-spinner>

To use this in your org, create a lwc component named 'spinner' and use the below code.

spinner.html

<template>
    <div class={containerClass}>
        <div role="status" class={spinnerClass}>
            <span class="slds-assistive-text">Loading...</span>
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>
        </div>
        <div data-id="spinnerMsg" class={messageClass}>
            <div style="margin-left:-50%">{_message}</div>
        </div>
    </div>
</template>

spinner.js

import { LightningElement, api } from "lwc";

const SPINNER_CLASS = "slds-spinner";
const MESSAGE_CLASS = "spinner-msg";
export default class Spinner extends LightningElement {
    isConnected;
    _size = "medium"; //Supports all the valid values of lightning:spinner,
    //but spinner message will be supported only for small, medium and large.
    _variant = "base"; //Valid values: base, brand, inverse
    _message = "Loading...";
    _hideBackground = false;

    containerClass = "slds-spinner_container";
    spinnerClass;
    messageClass;

    @api
    set size(value) {
        this._size = value ? value : "medium";
        if (this.isConnected) this.init();
    }
    get size() {
        return this._size;
    }

    @api
    set variant(value) {
        this._variant = value ? value : "base";
    }
    get variant() {
        return this._variant;
    }

    @api
    set message(value) {
        this._message = value ? value : "Loading...";
        if (this.isConnected) this.init();
    }
    get message() {
        return this._message;
    }

    connectedCallback() {
        this.init();
        this.isConnected = true;
    }

    init() {
        this.containerClass += this._variant == "inverse" ? " slds-inverse_background" : "";
        this.spinnerClass = `${SPINNER_CLASS} ${SPINNER_CLASS}_${this._size} ${SPINNER_CLASS}_${this._variant}`;
        this.messageClass = `${MESSAGE_CLASS} ${MESSAGE_CLASS}_${this._size} slds-color_${this._variant}`;
        if (this._size == "xx-small" || this._size == "x-small") this.messageClass = "slds-hide";
    }
}

spinner.css

.spinner-msg {
    position: absolute;
    top: 50%;
    left: 50%;
}
.spinner-msg_x-small {
    padding-top: 0.75rem;
    font-size: 0.75rem;
}
.spinner-msg_small {
    padding-top: 1rem;
    font-size: 0.9rem;
}
.spinner-msg_medium {
    padding-top: 1.5rem;
    font-size: 1.25rem;
}
.spinner-msg_large {
    padding-top: 1.75rem;
    font-size: 1.75rem;
}
.slds-color_brand {
    color: var(--lwc-brandPrimary);
}
.slds-color_inverse {
    color: var(--lwc-colorBackgroundAlt);
}
.slds-color_base {
    color: #b0adab;
}
.slds-inverse_background {
    background-color: var(--lwc-colorBackgroundAltInverse);
    opacity: 0.5;
}

PS: Hope this helps! Please share your feedback/suggestions/any exciting posts you come across. Happy Coding!