I'm trying to make a percentage circle like on this picture:
I've tried to use this here but I'm not very happy. I'm not able to change the progress of the circle and all in all I'm not sure if this is the best idea I've head:
circle {
stroke-dasharray: 326px;
stroke-dashoffset: 0;
stroke-linecap: round;
stroke-width: 4px;
stroke: #000000;
fill: none;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}<svg><circle r="52" cx="54" cy="54"></circle></svg>