Если посмотреть внимательно на код первого ответа, то для получения дуги используется circle
, низ которой экранирован линией с широкой строкой
<line x1="0" y1="500" x2="500" y2="500" style="stroke: rgb(255 255 255);stroke-width: 214px;"></line>
По большому счету это костыль, который проявится при изменении цвета фона.
Второй недостаток, если понадобится управлять анимацией с помощью input, то будет заметна задержка начала анимации, так как часть круга скрыта.
Чтобы избежать этого то лучше использовать для получения дуги Elliptical Arc (A,a)
Из формулы Arc видно, что нам нужны координаты начала и конца дуги. Радиусы будут равны 200px

<path d="M76.8,350 A200,200 0 1 1 423.2,350" />
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" class="progress-bars" width="500" height="500" viewBox="0 0 1000 1000">
<path transform="rotate(3.5 250 250)" d="M76.8,350 A200,200 0 1 1 423.2,350" fill="none" stroke="#e8e8e8"
stroke-width="10" stroke-dasharray = "80 24.75"
stroke-linecap="round" />
</svg>
Далее всё, как в первом ответе: над дугой с красными секторами, размещена точно такая же дуга с серыми секторами. Маска применяется к верхней дуге и при перемещении маски, серые сектора прорезаются, показывая тем самым нижние, красные сектора.
Для управления анимацией добавлен input и вывод процентов выполнения
let total = velocity.getTotalLength(),
input = document.querySelector("[type='range']"),
txt = document.querySelector("#txt1");
input.addEventListener("input",()=>{
progress();
})
window.addEventListener("load",()=>{
progress();
})
function progress(){
let val = Number(input.value);
let dash = total * val / 100;
let gap = total - dash;
velocity.style.strokeDasharray = dash + " " + gap
txt.innerHTML = (val + "%");
}
.container {
width:50vw;
height:50vh;
}
<div class="container">
<div><input id="size" type="range" min="0" step="1" max = "100" value="0" /></div>
<svg id="svg1" class="progress-bars" viewBox="0 0 500 500">
<defs>
<mask id="mask">
<rect width="100%" height="100%" fill="white" />
<path id="velocity" fill="none" stroke="black" stroke-width="10" stroke-dasharray ="0,838" stroke-linecap="round" d="M76.8,350 A200,200 0 1 1 423.2,350" >
</path>
</mask>
</defs>
<g transform="rotate(3.5 250 250)" >
<path fill="none" stroke="#e91e63" stroke-width="10" stroke-dasharray = "80 24.75" stroke-linecap="round" d="M76.8,350 A200,200 0 1 1 423.2,350" />
<path mask="url(#mask)" fill="none" stroke="#e8e8e8" stroke-width="10" stroke-dasharray = "80 24.75" stroke-linecap="round" d="M76.8,350 A200,200 0 1 1 423.2,350" />
</g>
<circle class="" cx="250" cy="250" r="170" stroke-linecap="round" fill="#464646"></circle>
<text id="txt1" y="50%" x="50%" font-family="sans-serif" text-anchor="middle" font-size="56px" fill="white">0% </text>
</svg>
</div>