Angular Material Mat-Spinner Custom Color

Change color of mat-spinner

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>

Angular Material: How to change the background color for the mat spinner path

The circle is created dynamically, so you wouldn't find a property to color the remaining portion (since that remaining portion is not painted at all - there is nothing there that we can change the color of);

But you can get the effect that you're looking for... you can do this by:

• creating an image of the complete circle, placing it in your mat-card... I took the following purple image

• Next, placing the mat-spinner on top of this static image via position:absolute

relevant HTML:

<mat-card>
    <mat-card-content>
        <h2 class="example-h2">Result</h2>

        <img src='https://i.stack.imgur.com/aNUGr.png' alt='background'/>

        <mat-progress-spinner class="example-margin" [color]="color" [mode]="mode" [value]="value">
        </mat-progress-spinner>
    </mat-card-content>
</mat-card>

relevant CSS:

mat-progress-spinner{    
  position: absolute;
  top: 56px;
  left: 19px;
}

circle{
  stroke-width: 11%;
}

complete working stackblitz here

Cannot change mat-spinner's colour

::ng-deep is not officially deprecated and is contingent upon browsers removing support for it, per angular.io, until then, meaning is officially deprecated by the browsers, it should be preferred over /deep/ and >>> for broader compatibility.

As such we plan to drop support in Angular (for all 3 of /deep/, >>>
and ::ng-deep). Until then ::ng-deep should be preferred for a broader
compatibility with the tools.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

---

If your preference is to avoid ::ng-deep you will need to apply your modifications for the mat-spinner to the root styles.css in your project

in styles.css

.orange-spinner circle{
  stroke:orange !important;
}

add class

<mat-spinner class="orange-spinner"></mat-spinner>

Stackblitz

https://stackblitz.com/edit/angular-czd4zq?embed=1&file=styles.css

---

Please note:

Per UmutEsen comment below, the correct solution is to setup a theme and leverage the color input on the mat-spinner.

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

Change style of Progress spinner in angular material

Correct me if i'm wrong, but i think you can't change the type of mat-spinner.

I would suggest to use ngx-spinner npm package instead.
-> DEMO

 npm install ngx-spinner --save

Spinner type 'line-spin-clockwise-fade-rotating' will do the job.

<ngx-spinner
bdOpacity = 0.9bdColor = "#333"size = "medium"color = "#fff"type = "line-spin-clockwise-fade-rotating"[fullScreen] = "true"
>
<p style="color: white" > Loading... </p>
</ngx-spinner>

change the button color of mat-spinner-button

You can override CSS and set ViewEncapsulation to None:

Component.css:

.mat-raised-button.mat-primary {
    background-color: red;
}

Component.ts:

import { Component, ViewEncapsulation } from '@angular/core';
import { MatProgressButtonOptions } from 'mat-progress-buttons'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation : ViewEncapsulation.None // Here
})

Here is the working demo:)

Angular - Material: Progressbar custom color?

I can suggest to change one of the premade primary/warn/accent colors to your custom color.

In your styles.scss (if your style file is css you will have to change it to support scss):

  @import '~@angular/material/theming';
  // Plus imports for other components in your app.

  // Include the common styles for Angular Material. We include this here so that you only
  // have to load a single css file for Angular Material in your app.
  // Be sure that you only ever include this mixin once!
  @include mat-core();

  // Define the palettes for your theme using the Material Design palettes available in palette.scss
  // (imported above). For each palette, you can optionally specify a default, lighter, and darker
  // hue.

  $mat-blue: (
    50: #e3f2fd,
    100: #bbdefb,
    200: #90caf9,
    300: #64b5f6,
    400: #42a5f5,
    500: #2196f3,
    600: #1e88e5,
    700: #1976d2,
    800: #1565c0,
    900: #0d47a1,
    A100: #82b1ff,
    A200: #448aff,
    A400: #2979ff,
    A700: #2B66C3,
    contrast: (
      50: $black-87-opacity,
      100: $black-87-opacity,
      200: $black-87-opacity,
      300: $black-87-opacity,
      400: $black-87-opacity,
      500: white,
      600: white,
      700: white,
      800: $white-87-opacity,
      900: $white-87-opacity,
      A100: $black-87-opacity,
      A200: white,
      A400: white,
      A700: white,
    )
  );

  $candy-app-primary: mat-palette($mat-blue, A700);
  $candy-app-accent:  mat-palette($mat-orange, A200, A100, A400);

  // The warn palette is optional (defaults to red).
  $candy-app-warn:    mat-palette($mat-red);

  // Create the theme object (a Sass map containing all of the palettes).
  $candy-a-theme($candy-app-theme);
pp-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

  // Include theme styles for core and each component used in your app.
  // Alternatively, you can import and @include the theme mixins for each component
  // that you are using.
  @include angular-material

---

Related Topics