lightning:spinner Overlay screen

  • How do I remove the white patch on overlay screen?

    <div class="slds-align--absolute-center">
            <lightning:spinner aura:id="spinner" variant="brand" size="large" class="slds-hide"/>


    saveNewRecord: function(component) {
            var spinner = component.find('spinner');
            $A.util.toggleClass(spinner, 'slds-show');

    Issue: enter image description here

    i am asuming you have a typo here--> "slds=hide" or is this actually in your code? Also, any reason you are not using $A.util.toggleClass instead? and why are you using a boolean attribute on your spinner and using aura:if to display it?

    yes, you are right we can use toggle class, I just updated with toggle class, however I am still getting the white patch. am I missing anything else?

    now your css attribute value shows slds-show in your utilit class and in your lightning spinner component slds-hide

  • Ajay

    Ajay Correct answer

    4 years ago

    I have done something like this. better than earlier.

    .THIS .slds-spinner_container  {
        background-color: rgba(0, 0, 0, 0.10);
        margin-top: 200px;
        margin-bottom: 200px; 

    This has no effect for me, the spinner is still shown exactly as in the question.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM