JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
    <circle cx="100" cy="100" r="150" id="green-halo" fill="none" stroke="#00CC33" stroke-width="15" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" />
    <text id="myTimer" text-anchor="middle" x="100" y="110" style="font-size: 36px;" >0%</text>
</svg>

JavaScript

(function () {
    // math trick 2*pi*57 = 358, must be less than 360 degree 
    var circle = document.getElementById('green-halo');
    var myTimer = document.getElementById('myTimer');
    var interval = 30;
    var angle = 0;
    var angle_increment = 6;

    window.timer = window.setInterval(function () {
        circle.setAttribute("stroke-dasharray", angle + ", 20000");
        myTimer.innerHTML = parseInt(angle/360*100) + '%';

        if (angle >= 360) {
            window.clearInterval(window.timer);
        }
        angle += angle_increment;
    }.bind(this), interval);
})()