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;

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.