make a circular progress countdown timer? - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

make a circular progress countdown timer?

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>  Bhumi</title> 
   </head> 
   <body translate="no"> 
      <canvas height="200" width="200" id="counter"></canvas> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <script>
      var counter = document.getElementById('counter').getContext('2d');
var no = 10;//  w  w w  .  j  av  a  2  s .co  m
var pointToFill = 4.72;
var cw = counter.canvas.width;
var ch = counter.canvas.height;
var diff;
function fillCounter() {
    diff = ((no / 10) * Math.PI * 2 * 10);
    counter.clearRect(0, 0, cw, ch);
    counter.lineWidth = 15;
    counter.fillStyle = '#000';
    counter.strokeStyle = '#F5E0A9';
    counter.textAlign = 'center';
    counter.font = "25px monospace";
    counter.fillText(no + 'sec', 100, 110);
    counter.beginPath();
    counter.arc(100, 100, 90, pointToFill, diff / 10 + pointToFill);
    counter.stroke();
    if (no == 0) {
        clearTimeout(fill);
        counter.fillStyle = '#FFF';
        counter.fillRect(0, 0, cw, ch);
        counter.fillStyle = '#000';
        counter.fillText('Times up', 100, 110);
    }
    no--;
}
var fill = setInterval(fillCounter, 1000);
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials