Add Spinner in Modal/Popup in LWC Salesforce

by Rijwan Mohmmed

Hello, friends today we will learn about add Spinner in Modal/Popup in Lightning Web Component (LWC) Salesforce. We will show a spinner whenever load the data from the server or load the logic. In this way, we can give a better user experience to any user that something is in process. Spinner Modal/Popup LWC Salesforce.

There is a problem when we show the spinner in the modal/popup. It shows on the whole screen instead show only in modal body. For this, we just need a custom CSS position: relative in spinner parent div. Let’s understand with a simple example.

Checkout : Spinner in LWC

LWCModalSpinner.Html :

    <div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
										<span>Show Spinner in Modal Body LWC</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
                <div class="slds-page-header__col-actions">
                    <div class="slds-page-header__controls">
                    <div class="slds-page-header__control">
                        <ul class="slds-button-group-list">
                             <lightning-button name="openModal" label="Open Modal" onclick={openCloseModal} variant="brand" class="slds-m-around_small"></lightning-button>
	</div> <br/>
    <!-- This Modal will only be visible if showModal is set to true -->
    <template if:true={showModal}>
        <section aria-modal="true" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container ">
                <header class="slds-modal__header">
                    <h2 class="slds-text-heading_small">Modal Header</h2>
                    <lightning-icon class="slds-modal__close" icon-name="utility:close" size="small" onclick={openCloseModal}></lightning-icon>
                <div class="slds-modal__content modalBodySpinner">
                    <template if:true={showLoading}>
                        <lightning-spinner alternative-text="Loading" size="medium" class="spinnerClass"></lightning-spinner>
                    <div class="slds-p-around_small">
                            We will show spinner when ever load the data from server or load the logics. By this way we can give a better user experience to any user that something is in process.  There is a problem when we show the spinner in modal/popup. It show in whole screen instead show only in modal body. For this we just need a custom css position:relative in spinner parent div. Lets understand with a simple example.
                <footer class="slds-modal__footer">
                    <lightning-button variant="brand" label="Show/Hide Spinner" onclick={showHideSpinner} class="slds-p-around_x-small"></lightning-button>
                    <lightning-button variant="brand" label="Cancel" onclick={openCloseModal} class="slds-p-around_x-small"></lightning-button>
        <div class="slds-backdrop slds-backdrop_open"></div>

LWCModalSpinner.Js :

import { LightningElement, track } from 'lwc';
export default class LWCModalSpinner extends LightningElement {

    @track showModal = false;
    @track showLoading = false;
    openCloseModal() {
        // Setting boolean variable show/hide modal
        this.showModal = !this.showModal;
    showHideSpinner() {
        // Setting boolean variable show/hide spinner
        this.showLoading = !this.showLoading;

LWCModalSpinner.css :

	position: relative;;

You may also like


Trey November 10, 2021 - 10:28 pm

you are truly a excellent webmaster. The web site loading velocity is amazing.
It seems that you are doing any unique trick. In addition,
The contents are masterwork. you have done a wonderful
job in this matter!

Rijwan Mohmmed January 30, 2022 - 3:45 pm

Thank you

Ashli November 13, 2021 - 2:01 am

My brother recommended I might like this blog. He was entirely right.
This post truly made my day. You cann’t imagine just how much time
I had spent for this info! Thanks!

Bhaskar November 25, 2022 - 6:44 am

One suggestion for above solution instead of using internal css

Can be replaced with :


Leave a Comment