<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     viewBox="-10 -10 532 532" style="width: 250px; height: 250px;" xml:space="preserve">

    <circle class="path" cx="256" cy="256" r="256"
        transform="rotate(-90, 256,256)"/>
</svg>
    .path {
        stroke-width: 10;
        stroke: #000000;
        fill:  transparent;
        animation: dash 1s linear;
        animation-fill-mode: forwards;
    }

    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }
Array.from(document.getElementsByClassName("path")).forEach(pathElement => {
        pathElement.setAttribute('style', 'stroke-dasharray:'+pathElement.getTotalLength()+';stroke-dashoffset:'+pathElement.getTotalLength())
    })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.