Reverse the beginning of SVG progress bar

#1

Hello!

I am trying to create a progress bar in SVG which shows progress in % of it’s length,
but currently it is starting from right to left. I want left to right.

Here is the link to codepen
Codepen link

const bluePath = document.querySelector('.blue');
let length = bluePath.getTotalLength();
console.log(length);

bluePath.style.strokeDasharray = length;

let value = 50;
let to = length * ((100 - value) / 100);
bluePath.style.strokeDashoffset = Math.max(0, to);  

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140" height="140" viewBox="0 14 216.1 188.4" enable-background="new 0 14 216.1 188.4" xml:space="preserve">
	<path fill="none" stroke="#dfe3e9" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M 177.5, 181.4
		c 19.4-18.4, 31.5-44.5, 31.5-73.3
		c 0-55.8-45.2-101-101-101
		S 7,52.2,7,108
		c 0,28.9,12.1,54.9,31.5,73.3">
	</path>
	<path fill="none" class="blue" stroke="#4990e2"  stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M 177.5, 181.4
		c 19.4-18.4, 31.5-44.5, 31.5-73.3
		c 0-55.8-45.2-101-101-101
		S 7,52.2,7,108
		c 0,28.9,12.1,54.9,31.5,73.3">
	</path>
</svg>

Thank you,
Kuba :slight_smile:

#2