Линейный прогресс бар SVG можно реализовать с помощью изменения или:
1 stroke-dashoffset
от нуля до максимального значения равного полной длине линии.
Этот способ подробно описан в статье: Анимация рисования линии

2. stroke-dasharray
при этом способе в начальной точке роста линии прогресс бара значение
dash – длина черты, равно нулю, а gap – длина пробела максимальна.
stroke-dasharray:0,628;

По мере роста длины линии dash будет увеличиваться, gap уменьшаться:
При максимальной длине линии равной 628px для 25% заполненности линии
dash = 628 * 0.25 = 157px
gap = 628 * 0.75 = 471px
stroke-dasharray:157,471;

При достижении конца линии прогресcа dash (черта) станет максимальной, а gap (пробел) будет равен нулю
stroke-dasharray:628,0;

Ниже код CSS анимации линейного прогресс бара:

Интерактивный пример (input) с вывод значений stroke-dasharray