Как я понял из рисунка, - анимация прогресс бара должна начинаться из одной точки синхронно двумя линиями и заканчиваться тоже в одной точке.
Расчет цифр в атрибуте stroke-dasharray
При радиусе окружности r="100"
длина окружности равна C= 2 * PI * R = 628,3
Половина окружности равна 314,15
Анимация линии достигается с помощью увеличения черты от нуля до максимума - 628,3
У атрибута stroke-dasharray
первый параметр это длина черты, второй параметр это длина пробела, поэтому:
Чтобы получить в начале нулевую длину черты записываем:
stroke-dasharray="0 314.15 0 314.15"
Длина черты 0
длина пробела -314.15
длина черты 0
длина пробела -314.15
, в итоге линию не будет видно.
Для максимального значения видимости линии нужно убрать пробелы :
stroke-dasharray=0 0 628.3 0
Для анимации линии записываем в values
эти два значения stroke-dasharray
values="0 314.15 0 314.15;0 0 628.3 0"
var btn = document.getElementById('btn');
var anim = document.getElementById('an');
btn.onclick = function () {
anim.beginElement();
}
<button id="btn">Begin</button>
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="250" height="250" viewBox="0 0 300 300" >
<!-- Серая окружность, показывающая трассировку анимации. При необходимости можно убрать -->
<circle cx="150" cy="150" r="100" stroke="#d3d3d3" stroke-width="6" fill="none" />
<!-- Окружность, реализующая прогресс бар -->
<circle cx="150" cy="150" r="100" stroke="purple" stroke-width="6" fill="none" stroke-dasharray="0 628.3" >
<animate id="an"
attributeName="stroke-dasharray"
values="0 314.15 0 314.15;0 0 628.3 0"
begin="indefinite"
dur="4s"
fill="freeze"/>
</circle>
</svg>
Ещё пример основанный на этой технике
.container
{
width:50%;
height:50%;
background:black;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="#d3d3d3" stroke-width="10" />
<!-- Средняя точка начала анимации в центре слева stroke-dashoffset="31.1" -->
<path id="center" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="crimson" stroke-width="10" stroke-dashoffset="31.1" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_C.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Средняя точка слева stroke-dashoffset="-159.5" -->
<path id="Left" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="yellowgreen" stroke-width="10" stroke-dashoffset="-159.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_L.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Средняя точка слева сверху stroke-dashoffset="128.5" -->
<path id="Top" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="gold" stroke-width="10" stroke-dashoffset="128.5" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_T.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Средняя точка справа внизу stroke-dashoffset="192.7" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="dodgerblue" stroke-width="10" stroke-dashoffset="192.7" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_B.click" dur="4s" restart="whenNotActive" />
</path>
<!-- Средняя точка справа stroke-dashoffset="223.9" -->
<path id="Bottom" fill="none" d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z" stroke="purple" stroke-width="10" stroke-dashoffset="223.9" stroke-dasharray="0 128.5" >
<animate attributeName="stroke-dasharray" values="0 128.5 0 128.5;0 0 257 0" begin="btn_R.click" dur="4s" restart="whenNotActive" />
</path>
<g id="btn_L" transform="translate(-17 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="green" >L</text>
</g>
<g id="btn_C" transform="translate(3 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="24" y="95" font-size="10" fill="crimson" >C</text>
</g>
<g id="btn_T" transform="translate(23 0)" >
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="dodgerblue"/>
<text x="24" y="95" font-size="10" fill="orange" >T</text>
</g>
<g id="btn_B" transform="translate(43 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="dodgerblue" >B</text>
</g>
<g id="btn_R" transform="translate(63 0)">
<rect x="20" y="84" width="15" height="15" rx="7.5" fill="none" stroke="#B2B2B2"/>
<text x="25" y="95" font-size="10" fill="purple" >R</text>
</g>
</svg>
</div>