make it 2 svg circle
1 circle - unfilled circle
2 circle - simulated filled in, the JavaScript manage the attributes stroke-dasharray, stroke-dashoffset(if necessary), transform to rotate
have stroke-dasharray there is a dash(hell, it will be the filling) and gap(space) their you need to calculate
an example of my code from a project on vuejs
.order-status-wrap svg.order-status(viewBox="0 0 166 166") circle(cx="83" cy="83" r="78" fill="none" stroke="#3a3a3f" stroke-width="10") circle(cx="83" cy="83" r="73" fill="none" stroke="#4dc54f" v-bind:stroke-dasharray="dash+' '+gap" stroke-dashoffset="" stroke-width="5" transform="rotate(-90 83 83)") .order-status-text .order-status-label Order is made on .order-status-percent {{orderPercent}} % \r\r\rexport default {\rdata() {\rreturn {\rorderSteps: 7, // кол-во шагов оформления заказа\rorderStepsComplete: 2, // кол-во пройденных шагов\rcircleRadius: 73, // радиус окружности\r}\r},\rcomputed: {\rorderPercent () { // процент выполнения заказа\rreturn Math.round(this.orderStepsComplete/(this.orderSteps/100))\r},\rcircleLength () { // длина окружности\rreturn this.circleRadius*2*Math.PI;\r},\rdash () { // черта\rreturn this.circleLength/100*this.orderPercent;\r},\rgap () { // пробел\rreturn this.circleLength-this.dash;\r},\r},\r}\r
well, screw the setInterval for animation