一応なにもないと検証のしようがないのでサンプルあげておきます
これをベースに何をどうしたいか明示されるといいでしょう
javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3 btn.addEventListener('click',()=>{
4 let num=0;
5 let timerID=setInterval(()=>{
6 draw(num);
7 num++;
8 if(num>Number(n.value)) clearInterval(timerID);
9 });
10 });
11 const draw=per=>{
12 const stroke_color="orange";
13 const text_color="orange";
14 const base_color="gold";
15 const radian=180/Math.PI;
16 const cx=100;
17 const cy=100;
18 const r=80;
19 const S=-90;
20 let E=S;
21
22 const p1=document.querySelector('#p1');
23 const t1=[["x",cx],["y",cy]].reduce((x,y)=>(x.setAttribute(y[0],y[1]),x),document.querySelector('#t1'));
24 const speed1=10; // bigger is faster
25 const speed2=1; // smaller is faster
26 p1.setAttribute('stroke',stroke_color);
27 p2.setAttribute('fill',base_color);
28 t1.setAttribute('fill',text_color);
29 if(per>=100){
30 E=269.99;
31 per=100;
32 }else{
33 E=per/100*360+S;
34 }
35 console.log(E);
36 let f1=(E-S)<=180?0:1;
37 let x1=cx+r*Math.cos(S/radian);
38 let y1=cy+r*Math.sin(S/radian);
39 let x2=cx+r*Math.cos(E/radian);
40 let y2=cy+r*Math.sin(E/radian);
41 let dx=x2-x1;
42 let dy=y2-y1;
43 let d1=`M ${x1},${y1} a ${r} ${r} ${S} ${f1} 1 ${dx},${dy} `;
44 let d2=d1+`L ${cx},${cy}`;
45 p2.setAttribute('d',d2);
46 p1.setAttribute('d',d1);
47 t1.textContent=per;
48 }
49});
50
51</script>
52<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
53<path id="p2" d="" fill="none" />
54<path id="p1" d="" fill="none" stroke-width="3" />
55<text id="t1" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="black" font-size="20px" ></text>
56</svg>
57<hr>
58<input type="number" step="1" id="n" value="0" min="0" max="100">
59<input type="button" value="view" id="btn">