jquery canvas progress bar

by Danijel

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;
}

JavaScript

var range = $('#range');
var bg = $('#counter').get(0);
var 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.on('mousemove', function () {
    draw(this.value / 100);
});

$('<div />').animate({
    width: 100
}, {
    duration: 2000,
    easing: "easeOutBounce",
    step: function (now) {
        draw(now / 100);
        range.val(now);
    }
});