CODEWITHSUNDEEP
htmlcsssvgangular-materialgeometry
Lakshman Kumar
Lakshman Kumar

Reputation: 62

How to apply different color to stroke-dashoffset in SVG circle?

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>

Upvotes: 0

Views: 2933

Answers (2)

Aditya Mhamunkar
Aditya Mhamunkar

Reputation: 321

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%,
}

Upvotes: 2

Michael Mullany
Michael Mullany

Reputation: 31715

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>

Upvotes: 3

Related Questions