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.

1 Answer 1

2

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>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .