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

Question

I created a mat progress spinner, changed the color of the stroke, but need to know how to change the CSS for the remaining stroke path

I tried changing the color but it changed the stroke color. But I could not find anything related to path CSS. I could see circle is only getting generated when we use mat-progress-spinner

<mat-progress-spinner [color]="'orange'" [mode]="'determinate'" 
[diameter]="80" strokeWidth="5" [value]=" 70">
</mat-progress-spinner>

.mat-progress-spinner circle, .mat-spinner circle {
    stroke: green;
}

.mat-progress-spinner path, .mat-spinner path {
    stroke: red;
}

for example, value is 70 in the above example, then for 70 it should be mapped with orange color, need help on how to show different color for the remaining 30 value

70 - orange color
30 - yellow color (need solution for this)

Akber Iqbal Akber Iqbal · Accepted Answer · 2019-10-22T07:49:40

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

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

1 Answers