Angular Material mat-spinner custom color
CssAngularAngular MaterialSpinnerCss Problem Overview
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.
Css Solutions
Solution 1 - Css
Use this code for ** < mat-spinner >** add this code in your .css file
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
Solution 2 - Css
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.
Solution 3 - Css
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 - Css
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 - Css
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;
}
}
Solution 6 - Css
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>
Solution 7 - Css
I think the key here is that is must be in the GLOBAL styles.css
file. The below solution does work if placed there (should be the CSS file affected when material was added to the project if added with ng add
:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #b68200;
}
Of course you could also add classes to the component and specify different selectors if you want distinctly styled spinners. However, it seems the classes must be in the global CSS file.
Solution 8 - Css
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>
Solution 9 - Css
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;
}
}
}
Solution 10 - Css
By default angular material would give your spinner default color of primary. You can use 3 colors available in pallet that would be primary, accent, warn. However, if your needs are of different color please consider anyone of the below options.
-
Easy way(not recommended) You can use any of method to override css forcefully mention in other answers. I would recommend using parent class above spinner element if you do not want spinner to be of same color throughout the application.
-
The correct and recommended approach would we to use custom-theme for material. If you already have custom you can just do like creating a custom mixin called
//here $primary-color is the color you want your spinner to be @mixin spinner-custom-theme($primary-color, $accent-color, $warn-color) { $custom-spinner-theme-primary: mat-palette($primary-color); $custom-spinner-theme-accent: mat-palette($accent-color, A200, A100, A400); $custom-spinner-theme-warn: mat-palette($warn-color);
$custom-spinner-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
@include mat-progress-spinner-theme($custom-spinner-theme); }
Now go to file where @include angular-material-theme($custom-theme); is written and @include your mixin just below the @include angular-material-theme($custom-theme);
To know more on how to create custom theme you can check this blog here
Solution 11 - Css
In your css file mention like below:
::ng-deep.mat-progress-spinner circle,.mat-spinner circle {stroke: #f2aa4cff !important;}
Here, ::ng-deep will be used to force a style.
!important here what says is that "this is Important",you ignore all other rules and apply this rule.
Solution 12 - Css
In your styles.css file, add...
::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}
As you might have guessed, I have just made a simple modification to Nitin Wahale's answer. I have prefixed his answer with ::ng-deep
and it worked in my case as I had the same issue.
I hope this helps somebody
Solution 13 - Css
This is best achieved by doing a custom theme.
Solution 14 - Css
use this code
<md-progress-circular md-diameter="20px"></md-progress-circular>
md-progress-circular path {
stroke: purple;
}
Solution 15 - Css
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:
.custom-spinner-color {
stroke: #234188;
}
That was what I wanted to achieve. I suppose if you look for this question you probably want the same.
Solution 16 - Css
Sample Color, strokeWidth, diameter and title
<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>