CODEWITHSUNDEEP
cssangularangular-materialspinner
Kishore Kumar
Kishore Kumar

Reputation: 184

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

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

Upvotes: 3

Views: 5718

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

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

enter image description here

  • 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.sstatic.net/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

Upvotes: 2

Related Questions