lightning:spinner Overlay screen

I recently ran into this issue and the problem is that you need a slds-is-relative on the containing element.

When a lightning component is used as part of a quick action SF automatically adds a bodyWrapper classed div around the component.

Thus if your component is structured like so:

<aura:component>
     <lightning:spinner ....../>
</auraComponent>

or

<aura:component>
  <div>
     <lightning:spinner ....../>
  </div>
</auraComponent>

The Fix is to simply add slds-is-relative to the containing div, and if there is not one then add one as so

<aura:component>
   <div class="slds-is-relative">
     <lightning:spinner ....../>
   </div>
</auraComponent>

and the background for the spinner will be contained within the quick action window

Also, since the content is not loaded when the spinner is present you may need to add

style="min-height: 50vh;"

to the containing div to get the spinner centered.

If we could only get access to the bodyWrapper or if SF would add slds-is-relative to the div they wrap around it we would not need to do the above

I have done something like this. better than earlier.

.THIS .slds-spinner_container  {
    background-color: rgba(0, 0, 0, 0.10);
    margin-top: 200px;
    margin-bottom: 200px; 
}

Use following code in .css file of lightning component, working for any height

.THIS.slds-spinner_container{
    background: none;
}