I have to change the lighting-spinner color to RED. If u know please Help. Thank you!

.slds-spinner_large.slds-spinner:before, .slds-spinner_large .slds-spinner__dot-a:before, .slds-spinner_large .slds-spinner__dot-b:before, .slds-spinner--large.slds-spinner:before, .slds-spinner--large .slds-spinner__dot-a:before, .slds-spinner--large .slds-spinner__dot-b:before {
    animation-name: dotsBounceBefore-medium;
    top: -.3125rem;
    left: -.3125rem;
.slds-spinner_large.slds-spinner:before, .slds-spinner_large.slds-spinner:after, .slds-spinner_large .slds-spinner__dot-a:before, .slds-spinner_large .slds-spinner__dot-b:before, .slds-spinner_large .slds-spinner__dot-a:after, .slds-spinner_large .slds-spinner__dot-b:after, .slds-spinner--large.slds-spinner:before, .slds-spinner--large.slds-spinner:after, .slds-spinner--large .slds-spinner__dot-a:before, .slds-spinner--large .slds-spinner__dot-b:before, .slds-spinner--large .slds-spinner__dot-a:after, .slds-spinner--large .slds-spinner__dot-b:after {
    width: .625rem;
    height: .625rem;
.slds-spinner__dot-a:before {
    animation-delay: 83.33333ms;
.slds-spinner:before, .slds-spinner:after, .slds-spinner__dot-a:before, .slds-spinner__dot-b:before, .slds-spinner__dot-a:after, .slds-spinner__dot-b:after {
    content: '';
    position: absolute;
    background: var(--lwc-colorBackgroundSpinnerDot,rgb(176, 173, 171));
    border-radius: var(--lwc-borderRadiusCircle,50%);
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    transform: translate3d(0, 0, 0);
*, *:before, *:after {
    box-sizing: border-box;

--lwc-colorBackgroundSpinnerDot is not present in module while it is showing on the inspect page of the spinner component.

  • Are you going with lighting spinner slds tags or standard lightning-spinner tag from LWC? May 25, 2021 at 6:46
  • Standard lightning-spinner tag. May 25, 2021 at 6:56
  • 1
    You may need to convert that to slds tags so that you have control over the elements and you can change the color. try this : salesforce.stackexchange.com/a/250850/45062 May 25, 2021 at 7:03

1 Answer 1


It has been solved! Thanks for the comments.

    <div class="example">
    <lightning-spinner alternative-text="Loading" variant="brand" size="large" ></lightning-spinner>

  --lwc-brandPrimary: rgb(218 35 54);
  height: 80px;

You must log in to answer this question.

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