JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="timers">
    <div id="timer1" class="time">
    </div>
    <div id="timer2" class="time">
    </div>
    <div id="timer3" class="time">
    </div>
    <div id="timer4" class="time">
    </div>
</div>

CSS

#timers canvas {
   -webkit-transform : rotate(-90deg);  
   -moz-transform : rotate(-90deg);
}
body{
    background-color: #242424;
}
#timers .time{
    position: relative; z-index: 1; height: 70px; width: 70px; }
#timers span { 
    position   : absolute; 
    z-index    : 1; 
    top        : 50%; 
    margin-top : -0.6em;
    display    : block; 
    width      : 100%;
    text-align : center;
    height     : 1.5em;
    color      : #528f20;
    font       : 1.3em Arial;
}

JavaScript

function Timer(dur, par, can, cnt) {
    var parent = $(par),
        canvas = can ? $(can, parent)[0] : $('.timer', parent)[0],
        seconds = cnt ? $(cnt, parent)[0] : $('.counter', parent)[0],
        //ctx = canvas.getContext('2d'),
        sec = dur,
        countdown = sec;    

    if (!canvas)
        canvas = $("<canvas>").addClass('timer')
            .attr('width', 100).attr('height', 100).appendTo(parent)[0];
    
    if (!seconds)
        seconds = $("<span>").addClass('counter').appendTo(parent)[0];
    
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 8;
    ctx.strokeStyle = "#528f20";
    
    var startAngle = 0,
        time = 0,
        intv = setInterval(function() {
            var endAngle = (Math.PI * time * 2 / sec);
            ctx.arc(65, 35, 30, startAngle, endAngle, false);
            ctx.clearRect(0, 0, 200, 200);

            startAngle = endAngle;
            ctx.stroke();

            countdown--;
            if (countdown > 60) {
                seconds.innerHTML = Math.floor(countdown / 60);
                seconds.innerHTML += "." + countdown % 60;
            }
            else {
                seconds.innerHTML = countdown;
            }

            if (++time > sec, countdown == 0) {
                clearInterval(intv);
               
            }
        }, 10);
}

$(function() {
    Timer(180, '#timer1');
    Timer(240, '#timer2');
    Timer(300, '#timer3');
    Timer(360, '#timer4');
});