http://jsfiddle.net/fHmA8/1/
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<!--[if IE]><script type="text/javascript" src="http://www.craftygnome.com/fixes/excanvas.js"></script><![endif]-->
var animate = function() {
canvas.width = canvas.width; //clear canvas
percent += STEP_PERCENT; //increase percentage
var deg = percent / 100 * deg360; //calculate current position in radians
drawArc('#aaa', radius, deg360, null, true); //draw grey background (last parameter - true - draw shadow)
drawArc('#0e728e', radius, deg); //draw light blue
for (var i = 0, n = Math.floor(deg / deg60); i < n; i++) { //draw segments (as I understand segment drawing works not exactly as you want so you can delete this code)
var from = i * deg30 + deg1;
var to = from + deg30 - deg1 * 2;
drawArc('#250696', radius, to, from);
}
if (percent >= 100) {
//done
} else {
setTimeout(animate, STEP_DELAY); //next step in STEP_DELAY ms
}
}