Circular Progress Ring

Build a circular progress ring using SVG, animating the stroke-dashoffset to reflect a percentage value.

The progress ring should show a numeric percentage in the center, with the circular arc filling proportionally as the value increases.

Use an SVG circle with stroke-dasharray and stroke-dashoffset to control how much of the ring is filled. Adjust the offset based on the percentage.

Make the animation smooth when the value changes, and ensure the ring is centered and clearly visible.

Test with different percentage values (0%, 50%, 100%) to confirm the arc length matches.