Circle progress bar

by jksolock

HTML

<input id="range" type="range" min="0" max="100" />

<div id="container">
    <span class="progress-bg"></span>
    <canvas id="counter"></canvas>
    <span class="profile-pic"></span>
</div>

CSS

body {
    background: #eee;
}

#container {
    height: 100px;
    width: 100px;  
    position: relative;    
}

canvas {
    display: block;
    position: relative;
}



.profile-pic {
    background: black;
    display: block;
    height: 44px;
    width: 44px;
    left: 28px;
    top: 28px;
    position: absolute;
    border-radius: 100%;
    box-shadow: 0 0 1px rgba(0, 0, 0, .5);
}

input {
    width: 200px;
}

JavaScript

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

ctx.beginPath();
ctx.strokeStyle = '#8bc347';
ctx.lineCap = 'round';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
//ctx.shadowBlur = 10;
//ctx.shadowColor = "rgba(153, 204, 51, 0.6)";
ctx.closePath();
ctx.fill();
ctx.lineWidth = 6.0;

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

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

range.addEvents({
    mousemove: function() {
        draw(this.value / 100);
    }
});

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