SLDS - How to position a spinner on a Lightning component
You need to apply position: relative
to the component element, in your case uploadCard
. This contains the overlay to within the boundaries of your component The following code works as expected (jsfiddle.net) and overlays only your component:
<div aura:id="uploadCard" class="slds-card__header" style="position:relative">
<div class="slds-form--compound">
<div>content goes here</div>
<div class="slds-spinner_container" aura:id="uploadSpinner">
<div class="slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</div>
</div>
It will render like this:
Alternatively, you can assign the class .slds-is-relative
which has the same effect:
<div aura:id="uploadCard" class="slds-card__header slds-is-relative">...</div>
As per the documentation:
Stencils should be responsive and stretch to fill the container that they are in.
So your slds-spinner-container
is filling the parent container (slds-form--compound
) since it has this:
.slds-spinner_container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: calc(9000 + 2);
background-color: rgba(255,255,255,.75);
visibility: visible;
opacity: 1;
transition: opacity .2s ease,visibility 0s;
transition-delay: 0s,.3s;
}
I would create a parent container for your spinner container like this:
<div class="slds-form--compound ">
<component content goes here>
<div class="mySpinner">
<div class="slds-hide slds-spinner_container" aura:id="uploadSpinner">
<div class="slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
<div class="slds-spinner__dot-a" />
<div class="slds-spinner__dot-b" />
</div>
</div>
</div>
Where mySpinner is:
.mySpinner {
position: relative;
height: 5rem;
width: 5rem;
}
Then try and position that container accordingly.