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>

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?

1 Answer 1


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

    <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>
  • Sorry that didn't work. The spinner was not centered and did not grey out the UI.
    – fred
    Commented Nov 30, 2021 at 14:40

You must log in to answer this question.

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