0
 <div class="slds-text-body_small">
         <aura:if isTrue="{!v.showLoadingSpinner}">
           <div class="slds-is-relative slds-text-color_error spinner">
            <lightning:spinner aura:id="spinner" variant="brand" size="large"/>
         </div>
        </aura:if> 
                </div>

enter image description here

I'm using "slds-is-relative" to move the spinner to the top of the page regardless of page height. Everything works fine without "slds-is-relative", except that it is centered and not visible on the page if the page has a lot of content on it.

0

slds-is-fixed

When you have very long content in page such that you have to scroll down, the spinner will not cover it entirely. As a work-around you can use class slds-is-fixed so that it will always be visible even if you scroll (but you cannot click).

<lightning:spinner class="slds-is-fixed"></lightning:spinner>

slds-is-relative: Consider below component:

<aura:component implements="lightning:isUrlAddressable" access = "GLOBAL">

    <div>
        some content
    </div>

    <div>
        <lightning:spinner></lightning:spinner>
    </div>

    <div>
        some other content
    </div>

</aura:component>

Here the spinner will be shown and the background shade will occupy whole screen.


Now consider below:

<aura:component implements="lightning:isUrlAddressable" access = "GLOBAL">

    <div>
        some content
    </div>

    <div class="slds-is-relative">
        <lightning:spinner></lightning:spinner>
    </div>

    <div>
        some other content
    </div>

</aura:component>

Here spinner will be shown, but the background shade will be restricted to its own div which has slds-is-relative.


Use cases:

Consider a scenario where you are showing list of records in list of cards. When you update a record, then you will want to put ONLY that card with spinner.

Parent component:

<aura:component implements="lightning:isUrlAddressable" access = "GLOBAL">

    <div>
        some content
    </div>

    <aura:iteration>
        <c:myCard></c:myCard>
    </aura:iteration>

    <div>
        some other content
    </div>

</aura:component>

and now myCard:

<aura:component implements="lightning:isUrlAddressable" access = "GLOBAL">

    <div class="slds-is-relative">
        <lightning:spinner></lightning:spinner>

        // record information
    </div>

</aura:component>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.