A CodePen by Wm. Li. Multi Mini Countdown Rings with Unix Timestamps

index.html

<div id="container">
  <div id="receipt_1" class="receipt">
    <div class="parameters">
      <div class="processed_time"></div>
      <div class="eta_time"></div>
    </div>
    <canvas class="counter active" width="100" height="100">
    </canvas>  

  </div>
  <div id="receipt_2" class="receipt">
    <div class="parameters">
      <div class="processed_time"></div>
      <div class="eta_time"></div>
    </div>
    <canvas class="counter active" width="100" height="100">
    </canvas>
  </div>
  <div id="receipt_3" class="receipt">
    <div class="parameters">
      <div class="processed_time"></div>
      <div class="eta_time"></div>
    </div>
    <canvas class="counter active" width="100" height="100">
    </canvas> 
  </div>
  <div id="receipt_4" class="receipt">
    <div class="parameters">
      <div class="processed_time"></div>
      <div class="eta_time"></div>
    </div>
    <canvas class="counter active" width="100" height="100">
    </canvas> 
  </div>
  <div id="receipt_5" class="receipt">
    <div class="parameters">
      <div class="processed_time"></div>
      <div class="eta_time"></div>
    </div>
    <canvas class="counter active" width="100" height="100">
    </canvas> 
  <div>
  <div id="receipt_6" class="receipt">
    <div class="parameters">
      <div class="processed_time"></div>
      <div class="eta_time"></div>
    </div>
    <canvas class="counter active" width="100" height="100">
    </canvas> 
  </div>
</div>

script.js

// set dummy values
$("#receipt_1 .processed_time").html(getUnixTimestamp());
$("#receipt_1 .eta_time").html(getUnixTimestamp()+101*60);
$("#receipt_2 .processed_time").html(getUnixTimestamp());
$("#receipt_2 .eta_time").html(getUnixTimestamp()+20*60);
$("#receipt_3 .processed_time").html(getUnixTimestamp());
$("#receipt_3 .eta_time").html(getUnixTimestamp()+0.5*60);
$("#receipt_4 .processed_time").html(getUnixTimestamp());
$("#receipt_4 .eta_time").html(getUnixTimestamp()+2*60);
$("#receipt_5 .processed_time").html(getUnixTimestamp());
$("#receipt_5 .eta_time").html(getUnixTimestamp()+3*60);
$("#receipt_6 .processed_time").html(getUnixTimestamp());
$("#receipt_6 .eta_time").html(getUnixTimestamp()+2.5*60);


function getUnixTimestamp()
{
  return Math.floor((new Date()).getTime() / 1000);
}


function countdown()
{
  $('.counter.active').each(function(index, activeCounter){
  
    var parameters = $(".parameters", $(activeCounter).parent());
    var timeLeft = parseInt($(".eta_time", parameters).html()) - getUnixTimestamp();
    drawTimer(activeCounter, parseInt($(".processed_time", parameters).html()), parseInt($(".eta_time", parameters).html()));
    
    if (timeLeft <= 0)
    {
      $(activeCounter).removeClass("active").addClass("completed").html("completed");
    }
    
  });
}

function drawTimer(canvas, processed, eta)
{
    var timeLeft = eta - getUnixTimestamp();
    var timePassed = getUnixTimestamp() - processed;
  
    var countTo=eta - processed;
    var counter=timePassed;
  
    var min=Math.floor(timeLeft/60);
    var sec=timeLeft-(min*60);
    
    // failsafe
    if (timeLeft <= 0)
    {
      min = 0;
      sec = 0;
    }
    
    
    var inc=360/countTo; 
    var angle=270 + (inc * counter);
  
    var ctx=canvas.getContext('2d');
    var cWidth=canvas.width;
    var cHeight=canvas.height;
    //======= reset canvas
    
    ctx.fillStyle="#2e3032";
    ctx.fillRect(0,0,cWidth,cHeight);
    
    //========== base arc
    
    ctx.beginPath();
    ctx.strokeStyle="#252424";
    ctx.lineWidth=10;
    ctx.arc(cWidth/2,cHeight/2,40,(Math.PI/180)*0,(Math.PI/180)*360,false);
    ctx.stroke();
    ctx.closePath();
    
    //========== dynamic arc
    
    ctx.beginPath();
    ctx.strokeStyle="#e74c3c";
    ctx.lineWidth=12;
    ctx.arc(cWidth/2,cHeight/2,40,(Math.PI/180)*270,(Math.PI/180)*angle,false);
    ctx.stroke();
    ctx.closePath();
    
    //======== inner shadow arc
    
    grad=ctx.createRadialGradient(cWidth/2,cHeight/2,80,cWidth/2,cHeight/2,115);
    grad.addColorStop(0.0,'rgba(0,0,0,.4)');
    grad.addColorStop(0.5,'rgba(0,0,0,0)');
    grad.addColorStop(1.0,'rgba(0,0,0,0.4)');
    
    ctx.beginPath();
    ctx.strokeStyle=grad;
    ctx.lineWidth=10;
    ctx.arc(cWidth/2,cHeight/2,40,(Math.PI/180)*0,(Math.PI/180)*360,false);
    ctx.stroke();
    ctx.closePath();
    
    
    
    //====== Labels
    
    var textColor='#95a5a6';
    var textSize="10";
    var fontFace="helvetica, arial, sans-serif";
    
    ctx.fillStyle=textColor;
    ctx.font=textSize+"px "+fontFace;
    ctx.fillText('MIN',cWidth/2-46,cHeight/2-40);
    ctx.fillText('SEC',cWidth/2+25,cHeight/2-15);
    
    //====== Values
    
    
    
    ctx.fillStyle='#e74c3c';
    
  
    if (min> 99) {
      ctx.font='26px '+fontFace;
      ctx.fillText('99' ,cWidth/2-29,cHeight/2+15);
      
      
      ctx.font='15px '+fontFace;
      ctx.fillText('+' ,cWidth/2-34,cHeight/2-3);      
    } else if (min>9) {
      ctx.font='30px '+fontFace;
      ctx.fillText(min ,cWidth/2-34,cHeight/2+15);
            
    }
    else {
      ctx.font='38px '+fontFace;
      ctx.fillText(min ,cWidth/2-22,cHeight/2+15);
    }
    
    ctx.font='15px '+fontFace;
    ctx.fillText(':',cWidth/2+0,cHeight/2+13);
    ctx.font='22px '+fontFace;
    if (sec<10) {
      ctx.fillText('0'+sec,cWidth/2+5,cHeight/2+15);
    } 
    else {
      ctx.fillText(sec,cWidth/2+5,cHeight/2+15);
    }    
    
  
}

var timer = setInterval(countdown, 1000);

style.css

body {
  background:#2e3032;
}

canvas {
  display:block;
  margin:10px;
  float: left;
}

.parameters
{
  display: none;
}

.counter.completed
{
  color: red;
}