Angular 材质：如何更改垫子微调器路径的背景颜色

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 )

Answer 1

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