Angular Material mat-spinner custom color

Question

Does anyone know how can I change mat-spinner color in Angular Material? Overriding css doesn't work. I tried changing color in material files but they can only be imported, I can't change anything there. I want it to be my custom color, not color from prebiult-themes.

Solution 1

Use this code for ** < mat-spinner >** add this code in your .css file

.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}

Solution 2

This answer will work for those who're looking for a flexible solution in Angular 4 / 6 / 7. If you wan't to change the color of a mat-spinner at a component level, you'll need to use the ::ng-deep selector. Knowing this, the solution is quite easy.

• In your html file:

    <div class="uploader-status">
        <mat-spinner></mat-spinner>
    </div>

• In your css / scss file:

    .uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
        stroke: #000000;
    }

.uploader-status

::ng-deep

Check this to learn more

Solution 3

Easy Fix!

Add custom css rules inside styles.css instead of component.css file

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #2A79FF!important;
}

Solution 4

To your .css/.scss component file style add (it will works locally - in component only)

:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {   
    stroke: #bada55;
}

Solution 5

If you don't want to mess around with the global css and need a way to set the spinner to different colors in different areas of your app, I would strongly recommend to create a directive for it.

import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';
@Directive({
  selector: "[customSpinner]"
})
export class CustomSpinnerDirective implements AfterViewInit{
  @Input() color: string;
  constructor(
    private elem: ElementRef
  ){}
  ngAfterViewInit(){
    if(!!this.color){
      const element = this.elem.nativeElement;
      const circle = element.querySelector("circle");
      circle.style.stroke = this.color;
    }
  }
}

Then the spinner should work like this:

<mat-spinner diameter="22" customSpinner color="#fff"></mat-spinner>

View more solutions

Comments

[Recek]

For me it also didn't work on component level, but it works fine in the global.css.

[DaveC426913]

Tried everything else. This is the only method that worked for me. Added it to my styles.css (after @import theme) rather than component css.

[DaveC426913]

Yes. It wasn't until I added it to styles.css after the @import that I got a fix.

[user2421145]

Funcionou pra mim!

[akgupta]

Otherwise, if you are displaying spinner in some internal component then one can use the same CSS, mentioned here, by prefixing with ':host /deep/...'. Like ":host /deep/.mat-progress-spinner circle, .mat-spinner circle { stroke: #3fb53f; }

[Stefan Falk]

Saved my life today.

[vighnesh153]

Is it OK to use this in production? Seems a bit hacky.

[Nanda Kishore Allu]

Hi, can we update the spinner color dynamically (eg : selected color should be updated from picker) ?

[lostintranslation]

Extremely limited, what if you need a one off like white?

[Jason Aller]

When adding an answer to a question that already has eleven answers it is important to point out what new aspect of the question your answer addresses, because without that someone may mistake your answer for a duplicate or even a copy if your change was subtle. Plus you aren't advocating for your answer by explaining how and why it works and why it is the best choice for whatever criteria you think it is best for.

[Jeppe]

The question is literally how to set a custom color.

[Jeppe]

This makes all spinners white, right? Wouldn't consider that an easy fix. You could however add an outer class so this only applies to spinners inside an element with that class.

[user5826312]

Thank you! adding :host ::ng-deep made it work for me.

[Rahmat Ali]

::ng-deep is not recommended and should not be used. It will may have impact on other components and parts of application as well.

[Admin]

Clean, no use of ng-deep, multiple colors for different part of the app. Perfect.