CODEWITHSUNDEEP
angular-materialangular6
Omar AMEZOUG
Omar AMEZOUG

Reputation: 998

Change color of mat-spinner

How to change color of mat-spinner i tried this but doesn't work

Html

<mat-spinner [color]="red" ></mat-spinner>
<mat-spinner [color]="#ffffff" ></mat-spinner>

Upvotes: 4

Views: 12728

Answers (4)

Isabella
Isabella

Reputation: 11

The only way that worked for me:

scss

.mat-mdc-progress-spinner{
  --mdc-circular-progress-active-indicator-color: #yourColor;
}

There was no need to change anything in the html file.

Upvotes: 1

Avin Kavish
Avin Kavish

Reputation: 8937

The color property only accepts the values primary, accent and warning. These are colors that correspond to the Material Design theme used in your project.

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

If you want to override this with a custom color add the following css in a global style sheet:

.mat-progress-spinner circle, .mat-spinner circle {
  stroke: /* color */
}

Note

View encapsulation prevents the styles from working when placed in a component style sheet.

Upvotes: 4

Omar AMEZOUG
Omar AMEZOUG

Reputation: 998

This code worked for me :

scss

.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}

html

<mat-spinner [diameter]="25" class="mat-spinner-color"></mat-spinner>

Upvotes: 12

Edric
Edric

Reputation: 26710

The color input accepts three values:

  • primary: The primary palette of your app
  • warn: The warn palette of your app
  • accent: The accent palette of your app

To use hex codes, you can only do it with CSS. I suggest you use the Chrome DevTools to see which CSS classes to target. Note that you should use the !important selector as well.

Upvotes: 1

Related Questions