0

I am using material spinner to display progress status. I want the unfilled area to be gray in color.

enter image description here

<svg style="width: 100px; height: 100px;">
  <circle cx="50%" cy="50%" r="45" style="animation-name: 
     mat-progress-spinner-stroke-rotate-100; stroke-dashoffset: 197.92px; stroke-dasharray: 282.743px; stroke-width: 10%;">
  </circle>
</svg>
Lakshman Kumar
  • 62
  • 11
  • here is a similar question where you can find the same thing with animation https://stackoverflow.com/questions/48601880/svg-counterclockwise/48602162 – Temani Afif Feb 05 '18 at 08:09

2 Answers2

3

Just draw a complete grey circle first with no stroke-dasharray. And draw your incomplete circle afterward (last drawn is always on top).

<svg style="width: 100px; height: 100px;">
<circle cx="50%" cy="50%" r="45" fill="none" stroke="grey" stroke-width="10%";>
  </circle>
  <circle cx="50%" cy="50%" r="45" fill="none" stroke="orange" style="animation-name: 
     mat-progress-spinner-stroke-rotate-100; stroke-dashoffset: 197.92px; stroke-dasharray: 282.743px; stroke-width: 10%;">
  </circle>
</svg>
Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
2

Try applying the following styles to the svg tag:

svg {
  background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 56%,#bbbbbb 59%,#bbbbbb 100%);
  border-radius: 50%,
}
Aditya Mhamunkar
  • 261
  • 3
  • 4