Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

378
Views
How to bind md-progress-spinner's color in Angular 2 Material 2, to a custom color?

I want to use md-progress-spinner, to display percentage of the work done, yet I want to change it's stroke color from red to green dynamically based on the percentage.

How can I do that?

<md-progress-spinner 
     class="number" 
     mode="determinate" 
     [value]="today?.MemorizationPercent" 
     [style.background]="today?.MemorizationStateColor">
</md-progress-spinner>
about 4 years ago · Santiago Trujillo
2 answers
Answer question

0

After reading the comments while looking for a solution to my own problem, I was able to come up with the following fix. It's not pretty, but until they open up the color attribute to accept more than three colors, this will serve as a temporary solution.

The spinner is an SVG circle, so it's properties can be modified via CSS. You can change the color of the circle with stroke, and the background of the circle with fill.

In the HTML:

<mat-spinner class="very-pink"></mat-spinner>

In the CSS:

.very-pink::ng-deep circle {
  stroke: fuchsia;
}

Here is a link to a stackblitz demonstrating it.

EDIT: Thanks to ConquerorsHaki for pointing this out - /deep/, >>> and ::ng-deep have been deprecated. For the moment they still work, and one would hope that a migration script will be provided before they kill it. That said, this is not an optimal solution.

about 4 years ago · Santiago Trujillo Report

0

Have a look at demo-app example https://github.com/angular/material2/tree/master/src/demo-app/progress-spinner

You need to bind to [color] property.

Then in your code you can keep the logic that will change the color dynamically as you need based on your percentage value. e.g:

Template:

<md-progress-spinner 
     class="number" 
     mode="determinate" 
     [value]="today?.MemorizationPercent" 
     [color]="getColor(today?.MemorizationPercent)">
</md-progress-spinner>

Function getColor()sample:

getColor(percentage) {
   return percentage > 50 ? '_red_' : '_green_';
}

You need to define the colors in your custom material palette.

UPDATE:

important notice on your '_red_' and '_green_' colors:

The color of the progress-spinner. Can be primary, accent, or warn

As per progress-spinner source code https://github.com/angular/material2/blob/master/src/lib/progress-spinner/progress-spinner.ts#L110

/** The color of the progress-spinner. Can be primary, accent, or warn. */
  @Input()
  get color(): string { return this._color; }
  set color(value: string) {
    if (value) {
      this._renderer.removeClass(this._elementRef.nativeElement, `mat-${this._color}`);
      this._renderer.addClass(this._elementRef.nativeElement, `mat-${value}`);
      this._color = value;
    }

So getColor() becoming like say:

getColor(percentage) {
   return percentage > 50 ? 'accent' : 'warn';
}

If you not happy with any colors from prebuild theme palettes than you have to create our own, see https://material.angular.io/guides for more details

about 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!