Angular Material mat-spinner custom color

问题:

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.

回答1:

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

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

回答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;
    }

Notice that the .uploader-status css class encapsulates the component. You could just use ::ng-deep without using a class but then whatever changes you're doing to the mat-spinner will appear in other areas of the application. Check this to learn more.

回答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;
}

回答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;
}

回答5:

Color is build in.

Theming The color of a progress-spinner can be changed by using the color property. By default, progress-spinners use the theme's primary color. This can be changed to 'accent' or 'warn'.

https://material.angular.io/components/progress-spinner/overview

example

<mat-spinner color="warn"></mat-spinner>

回答6:

Late to the game, but this worked well in my .scss file today...

.parent-element-class {
    ::ng-deep 
    .mat-progress-spinner,
    .mat-spinner {
        circle {
            stroke: white;
        }
    }
}

回答7:

mat-spinner html code :

<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>

And now sass code :

.mat-spinner {
    ::ng-deep circle {
        stroke: #33dd82;
    }
}

回答8:

This is best achieved by doing a custom theme.

https://material.angular.io/guide/theming

回答9:

use this code

<md-progress-circular md-diameter="20px"></md-progress-circular>

md-progress-circular path {
  stroke: purple;
}

回答10:

Sample Color, strokeWidth, diameter and title

<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>

回答11:

In case you guys want to customize each spinner on your webpage. You can do it this way:

svg .mat-progress-spinner circle, .mat-spinner circle {
  stroke: inherit;
}

And now on mat-spinner add class:

<mat-spinner class="custom-spinner-color"></mat-spinner>

And in css file:

.withdraw-deposit-modal-spinner{
  stroke: #234188;
}

That was what I wanted to achieve. I suppose if you look for this question you probably want the same.