JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<svg viewBox="0 0 52 52">
            <path id="the-path" class="loader--animated-path"
                    fill='none';
                    stroke-width='3';
                    stroke-miterlimit='10'
                    stroke="#000000"
                    d="M30.825 12L19.94 28.762c-1.704 2.624-5.213 3.37-7.837 1.665-2.624-1.704-3.37-5.212-1.666-7.837 1.705-2.624 5.213-3.37 7.837-1.665l15.63 10.15c2.625 1.704 6.134.96 7.838-1.665 1.704-2.625.958-6.133-1.666-7.837-2.624-1.704-6.133-.96-7.837 1.665L21.353 40"
            />
    </svg>

JavaScript

var path = document.getElementById('the-path')
   length = path.getTotalLength(),
   offset = 0
   
path.style.strokeDasharray = length + ' ' + length

function animate() {
	path.style.strokeDashoffset = offset;
  offset ++
	requestAnimationFrame(animate)
}

animate()