i've tried using ui:spinner and lightning:spinner in my lightning component. when i enable the spinner the spinner covers the whole top and bottom of my modal page. My expected behavior is to place the spinner inside the modal popup alone. Is there any solution that could satisfy my need?

spinner covvering the whole popup

Quickaction lightning component:

<aura:component implements="force:lightningQuickActionWithoutHeader">
        <center><img style="width: 4%; height: 4%" src="/resource/SLDS212/assets/icons/utility/error_60.png" alt="Loading..." />A System Error has Occurred.Please try again later</center>
  • 1
    Please throw some code snippets to the question so its easier to see whats wrong Oct 23, 2016 at 5:26
  • @MohithShrivastava i have added the code snippet for your reference. I dint do much in that lightning component. Oct 23, 2016 at 5:46

3 Answers 3


Adding of "slds-is-relative" class to the parent div solved this issue for me:

<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container " style="width:100%;">
                <div class="slds-modal__header">
                    <h2 class="slds-text-heading--medium">Test</h2>
                <div class="slds-modal__content slds-p-around--medium slds-is-relative">
                        <div class="slds-spinner_container">
                            <div class="slds-spinner--brand slds-spinner slds-spinner--small" role="alert">
                                <span class="slds-assistive-text">Loading...</span>
                                <div class="slds-spinner__dot-a"></div>
                                <div class="slds-spinner__dot-b"></div>
                        </div> ...
  • 1
    THANKS. This helped me fix my non-aura LWC modal, too! <lightning-modal-body class="slds-is-relative">
    – bkwdesign
    Dec 30, 2022 at 17:15

In my case I want it to take up the entire screen.

enter image description here

Considering that the modal of the Quick Action has the following css class:

.slds-modal__container {
    margin: 0 auto;
    width: 50%;
    max-width: 40rem;
    min-width: 20rem;

We can put the spinner component inside a

<!-- Loading wheel -->
<div class="loading_wheel">
    <aura:if isTrue="{! v.loading }">
        <lightning:spinner alternativeText="Loading" size="large" variant="brand"/>

and add the following css classes

/* -------- LOADING WHEEL --------- */
.THIS .loading_wheel{
  position: fixed;
.THIS .slds-spinner_container{
  width: 100vw;
  left: min(-25vw, calc(-50vw + 20rem));

I did some workaround of fixing the spinner by overriding the class properties.I want this to be applied only to desktops.

@media (min-width:1025px) { /*Desktop Break point*/
.THIS.slds-spinner_container {
    top: 16% !important;
    bottom: 16% !important;
  • 5
    Hi @SaravananBaskar This shouldn't be done as this is not a proper method. Did you try what Junaid has mentioned in his answer? Try adding the spinner element inside modal popup component.
    – SE_User
    Oct 24, 2016 at 9:13
  • @SE_User yes the spinner component is inside the lightning modal components. thats the one i tried first. You could see in the code ive pasted in the question. Oct 24, 2016 at 10:24

You must log in to answer this question.

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