JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<svg width="250" height="250" viewbox="0 0 250 250">
    <path id="border" transform="translate(125, 125)" />
    <path id="loader" transform="translate(125, 125) scale(.84)" />
</svg>

CSS

svg {
    display: block;
    margin: 50px auto;
}
#loader {
    fill: #0088cc
}
#border {
    fill: #00517a
}

JavaScript

var alpha = 0,
    pi = Math.PI,
    t = 3;

function draw() {
    alpha++;
    alpha %= 360;
    var r = (alpha * pi / 180),
        x = Math.sin(r) * 125,
        y = Math.cos(r) * -125,
        mid = (alpha > 180) ? 1 : 0,
        anim = 'M 0 0 v -125 A 125 125 1 ' + mid + ' 1 ' + x + ' ' + y + ' z';

    $('#loader').attr('d', anim);
    $('#border').attr('d', anim);

    //setTimeout(draw, t); // Redraw
};
draw()