Después de leer los comentarios mientras buscaba una solución a mi propio problema, pude encontrar la siguiente solución. No es bonito, pero hasta que abran el atributo de color para aceptar más de tres colores, esto servirá como una solución temporal.

La rueda giratoria es un círculo SVG, por lo que sus propiedades se pueden modificar a través de CSS. Puede cambiar el color del círculo con trazo y el fondo del círculo con relleno .

En el HTML:

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

En el CSS:

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

Aquí hay un enlace a un stackblitz que lo demuestra.

EDITAR: Gracias a ConquerorsHaki por señalar esto: /deep/, >>> y ::ng-deep han quedado en desuso . Por el momento todavía funcionan, y uno esperaría que se proporcione un script de migración antes de que lo eliminen. Dicho esto, esta no es una solución óptima.

Eche un vistazo al ejemplo demo-app https://github.com/angular/material2/tree/master/src/demo-app/progress-spinner

Debe enlazar a la propiedad [color] .

Luego, en su código puede mantener la lógica que cambiará el color dinámicamente según lo necesite en función de su valor porcentual. p.ej:

Modelo:

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

Muestra de la función getColor() :

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

Debe definir los colores en su paleta de materiales personalizada.

ACTUALIZAR:

aviso importante sobre '_red_' y '_green_' :

El color de la rueda de progreso. Puede ser principal, acentuar o advertir

Según el código fuente progress-spinner 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; }

Entonces getColor() se vuelve como decir:

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

Si no está satisfecho con los colores de las paletas de temas preconstruidos, debe crear los nuestros propios, consulte https://material.angular.io/guides para obtener más detalles.