JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <path class="svg1" style="fill: none; stroke: #3498db; stroke-linecap: round; stroke-width:7;stroke-linejoin:  miter; stroke-miterlimit: 4;" d="M247 103 A130 130 0 1 1 247 363 A130 130 0 1 1 247 103" />
</svg>

CSS

.svg1 {
    stroke-dasharray: 822;
    stroke-dashoffset: 822;
    -webkit-animation: dash 5s linear alternate infinite;
}
@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 822;
    }
    to {
        stroke-dashoffset: 0;
    }
}

JavaScript

var path = document.querySelector('.svg1');
var length = path.getTotalLength();
console.log(length);