i am overriding New button with a lightning component which is displayed as Modal. I have added spinner to it. But the spinner comes at very top of the modal. How to bring the modal in middle .

enter image description here


    <div class="slds-theme_default">
        <div class="slds-is-relative">
            <template if:true={spinner}>
             <lightning-spinner variant="brand" size="medium"></lightning-spinner>
            <template if:true={openmodel}>
                <div class="demo-only">
                    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                        <div class="slds-modal__container">

                            <header class="slds-modal__header">
                                    <button class="slds-button slds -button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                                        <lightning-icon icon-name="utility:close" size="medium">
                                        <span class="slds-assistive-text">Close</span>
                                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Test</h2>

                            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1" style="height: 50vh;">

                                <footer class="slds-modal__footer">
                                    <lightning-button variant="Neutral" label="Cancel" onclick={closeModal}>
                                    <lightning-button variant="brand" label="Save" onclick={redirect}>
                    <div class="slds-backdrop slds-backdrop_open"></div>

JS -

import {
} from 'lwc';
import {
} from "lightning/navigation";

export default class Modalspinner extends LightningElement {

    @track spinner = false;
    @api recordId;
    @track openmodel = true;

    redirect() {
        this.spinner = true;
        // eslint-disable-next-line @lwc/lwc/no-async-operation
                type: 'standard__recordPage',
                attributes: {
                    recordId: this.recordId,
                    objectApiName: 'Account',
                    actionName: 'view'
        this.spinner = false;

2 Answers 2


Adding spinner in the center on a Div you need to make a position:relative of a parent div Tag in which spinner is a child element.

In your case first div just below template tag, Replace this

        <div class="slds-theme_default">


    <div class="slds-theme_default" style="position:relative;">

this will solve your problem.


Try adding the following class to the spinner slds-align_absolute-center. This will align the spinner to the middle of the parent container.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .