Circular progress bar (canvas)

Circular progress bar (canvas)

by kujian

HTML

<input id="range" type="range" min="0" max="100" />
<canvas id="counter" width="240" height="240"></canvas>

CSS

canvas {
    display: block;
}

input {
    width: 200px;
}

body {
}

JavaScript

// SVG stuff
var range = document.getElementById('range');
var bg = document.getElementById('counter');
var ctx = ctx = bg.getContext('2d');
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

ctx.beginPath();
ctx.strokeStyle = '#99CC33';
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;

imd = ctx.getImageData(0, 0, 240, 240);

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}

//range.addEvents({
//    mousemove: function() {
//        draw(this.value / 100);
//    }
//});
var t=0; 
var frameInterval = 25; // in ms
var timer=null;
function loadCanvas(now){
  timer =  setInterval(function(){
      if(t>now){
          clearInterval(timer);
      }else{
          draw(t);
          t+=0.01;
      }
    },20);
}
loadCanvas(80/100);
timer=null;

var myFx = new Fx({
    duration: 8000,
    transition: 'bounce:out',
    onStep: function(step){
        draw(step / 100);
        range.set('value', step);
    }
});

myFx.set = function(now){
    var ret = Fx.prototype.set.call(this, now);
    this.fireEvent('step', now);
    return ret;
};

//myFx.start(0, 100);