How can I change the color of the not filled in circle in the mat-spinner

Question

Using a mat spinner like this:

<mat-progress-spinner class="mat-spinner" [color]="'primary'" [mode]="'determinate'"
    [strokeWidth]="2" [diameter]="16" [value]="10">
</mat-progress-spinner>

The circle will be filled in for only 10%. I want to give a light color blue style to the other 90% thats not filled in. How can I styles that part of the spinner?

I tried:

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: #6aa1fe;
}

But that only styles the 10%.

score 1 · Answer 1 · answered Jan 01 '23 at 03:48

You can use box-shadow to create a filled shadow circle for mat-progress-spinner like this:

mat-progress-spinner {
  box-shadow: 0 0 0 10px #6aa1fe inset;
  border-radius: 50%;
}

where 10px is strokeWidth of your spinner. This is stackblitz demo.

Please take note that, accroding to this answer,

This works in modern browsers only. For example: No IE 8 support. See caniuse.com (box-shadow feature) for more info.

See more:

Some other solutions (like using outset): Placing border inside of div and not on its edge.
Using border-radius and box-shadow together (CSS)

score 0 · Answer 2 · answered Dec 30 '22 at 20:12

In this case I would recommend that you create a custom directive for the mat-progress-spinner element.

Here's how I solved your problem using custom directives:

Create a new directive in Angular by running the following command:

    ng g d spinner-variable-color

I updated the directive so it looked like this (you can refactor/simplify the code but I just did this fast to see if it works):

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[spinnerVariableColor]'
})
export class SpinnerVariableColorDirective {

  constructor(
    private elem: ElementRef
  ){}

  ngAfterViewInit(){
      const element = this.elem.nativeElement;
      const progress = element.getAttribute('aria-valuenow');
      const circle = element.querySelector('circle');

      if (progress > 20) {
        circle.style.stroke = '#6aa1fe';
      } else {
        circle.style.stroke = 'black';
      }
  }
}

You can now use it in your component like this:

<mat-progress-spinner spinnerVariableColor [value]="progress"></mat-progress-spinner>

where progress is just a variable I created to keep track of progress.

Hope this helped you solve your problem :) If you want to know more about custom directives in Angular I have a great article about it on my website -> What Is Custom Directives In Angular

How can I change the color of the not filled in circle in the mat-spinner

2 Answers2