Lightning Spinner not positioned correctly in quick action

Question

I'm trying to get a spinner and to grey out the UI in a Lightning Quick Action (using web components). When I add the spinner, it greys out the modal but also goes to the top and bottom of the screen. How do I get it to just grey out the modal?

This is my code:

<lightning-quick-action-panel title="Quick Action">

        <div class="spinner">
            <template if:true={isLoading}>
                <lightning-spinner alternative-text="Loading" variant="brand" size="medium"></lightning-spinner>
            </template>
        </div>

If I add slds-is-relative anywhere, it doesn't help, and actually stops the modal being greyed out. Is there a fix for this?

Answer 1

You should surround your spinner div with a container (such as a div) using the slds-is-relative class.

<template>
    <div class="slds-m-around_large">
        <p if:true={isLoaded}>Content has been loaded.</p>
        <div if:false={isLoaded} class="slds-is-relative">
            <lightning-spinner alternative-text="Loading..."></lightning-spinner>
        </div>
    </div>
</template>