0

I want to make my spinner in my modal to go darker but the CSS was not working.

CSS:

.THIS.loading_wheel {
    position: relative;
    background-color: rgba(0,0,0,0.5) !important;
    height: 80px;
}

MarkUp:

 <div class="slds-modal__content slds-p-around_medium slds-is-relative" id="modal-content-id-1">
      <div class="slds-grid slds-gutters">
           <!-- Loading wheel -->
           <div class="loading_wheel">
               <aura:if isTrue="{! v.loading }">
                   <lightning:spinner alternativeText="Loading" size="large" variant="brand"/>
               </aura:if>
           </div>
           ....
0

you can target inner spinner class in lightning spinner

.THIS .slds-spinner :before {
    background-color: rgba(0,0,0,0.5) !important;
}

.THIS .slds-spinner :after {
    background-color: rgba(0,0,0,0.5) !important;
}
.THIS .slds-spinner:before {
    background-color: rgba(0,0,0,0.5) !important;
}

.THIS .slds-spinner:after {
    background-color: rgba(0,0,0,0.5) !important;
}

Though this work there might be some other easier way

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.