How to implement animation on stroke-dasharray and stroke-offset circle svg?

Question

I try to make piechart using stroke line, however isn't work. The idea is piechart will be animate from 0 to 50 line.

 #circle{ stroke-dasharray: 50 100; stroke-dashoffset: 0; fill: none; stroke: black; stroke-width: 5px; transition: 0.3s; animation: progress 5s linear forwards; @keyframes progress { from { stroke-dasharray: 0 100; stroke-dashoffset: 0; } to { stroke-dasharray: 50 100; stroke-dashoffset: 50; } } }

 <svg > <circle cx='24' cy='24' r='18' id="circle"/> </svg>

Answer 1

The keyframes at-rule is not part of the CSS selector for the element. As default the path of the circle starts at 3 o'clock. The total length of the circle path can be controlled using the attribute pathLength. If the animation should go clockwise I think is is easier to control the starting point by setting the transform/rotate attribute on the circle instead of using the dasharray offset.

 #circle { stroke-dasharray: 0 100; fill: none; stroke: black; stroke-width: 5px; animation: progress 5s linear forwards; } @keyframes progress { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 100; } }

 <svg> <circle cx='24' cy='24' r='18' id="circle" pathLength="100" transform="rotate(-90 24 24)"/> </svg>