WEB前端 SVG 弧形进度条

小白前端，请教一下大神。

这个是我现在写的，想问一下用svg可以把它写成弧形吗？我现在用的是SVG，是不是用canvas会容易一些？能贴一下代码么？

这个是理想图

这是我HTML代码

        <svg id="js-times-svg" >
                <defs>
                         <linearGradient id="color-gradient" x1="0" y1="0%" x2="99.33%" y2="0%" gradientUnits="userSpaceOnUse">                           
                          <stop offset="0%" style="stop-color:#62B220"></stop>
                           <stop offset="100%" style="stop-color:#f6250a"></stop>
                         </linearGradient>
                </defs>
                <line x1="0" y1="50" x2="100%" y2="50.001" stroke="#666" stroke-width="30" stroke-dasharray="5 5"></line>
                <line id = "colorful" x1="0" y1="50" x2="99.33%" y2="50.001" stroke="url(#color-gradient)" stroke-width="30" stroke-dasharray="5 5" style="transition:all .5s ease;" class="prog"></line>

                        </svg>

JS：

            var i = 0;
            var flag = 1;
            setInterval(function(){
                console.log(document.querySelector("#colorful").setAttribute("x2",i+"%"));
                if(flag==1){
                    if(i==100){
                        flag = 0;
                    }
                    i++;
                }else{
                    if(i==0){
                        flag = 1;
                    }
                    i--;
                }


            },50);

https://blog.csdn.net/w89612b/article/details/78140531?utm_source=blogxgwz7