[SalesForce] SLDS – How to position a spinner on a Lightning component

In my custom Lightning component I can't work out how to apply the proper SLDS classes to my component. 

<aura:component controller="...">

<div aura:id="uploadCard" class="slds-card__header">            
    <div class="slds-form--compound ">
        <component content goes here>

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

When applying a spinner like this, the whole page gets coverd by the container and the spinner shows in the middle of the page.
In my scenario, I just want it to show on top of my component.
I tried applying the container class to different elements, but that just excludes the element from the greyed out area and mucks up the layout.

So is there someone who knows how to appy the container only to my component and not the entire page?

Best Answer

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>
Related Topic