lightning:spinner in slds-scrollable scrolls out of view

Question

I am displaying a long scrollable content in a modal

<c:strike_modal aura:id="filterModal" title="Filter volumes" primaryButtonLabel="Ok" secondaryButtonLabel="Cancel" showHeader="true" showFooter="true" showModal="false">
    <div class="slds-scrollable slds-is-relative">
        <lightning:spinner aura:id="spinner" class="slds-hide" />
        ...
        much content
        ...
    </div>
</c:strike_modal>

and my problem is that the spinner is not shown when the user scrolls to the bottom of the modal.

Answer 1

If Martin Lezer's answer is not what you're looking for, you can just put the lightning:spinnner outside of the <div class="slds-is-relative">. The spinner will be centered and the user will not be able to scroll.

Answer 2

If you want the spinner to follow the user's scroll, you can modify the position of the spinner.

By default, Lightning add the spinner to the center of the page. Using a div with the slds-spinner class with the following style:

.slds-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
}

To make this div follow the scroll, you can override this style and set the position to fixed using:

.THIS .slds-spinner {
    position: fixed;
}