Using spinner component in quick action lightning modal component not rendered as expected

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>
                <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>
                        </div> ...

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"/>
    </aura:if>
</div>

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));
}