var canvas = document.getElementById('efficient');

var ctx = canvas.getContext("2d");

var grd = ctx.createLinearGradient(0,200,100,10);

​

grd.addColorStop(0, '#85dd00');

grd.addColorStop(0.5, '#85dd00');

grd.addColorStop(1, 'rgba(255,255,255,0)');

​

ctx.arc(100,100,80,1.5*Math.PI,0*Math.PI);

ctx.lineWidth = 40;

ctx.strokeStyle = grd;

ctx.textAlign = "center";

ctx.textBaseline  = "middle";

ctx.font="bold italic 2.5rem Arial";

ctx.fillStyle = "#454545";

ctx.fillText("---", 100, 100);

ctx.stroke();

​

var i = 0;

$('#efficientWrapper').mouseenter(function(){

(function run() {

    if (i <= 85) {

        requestAnimationFrame(run);

        ctx.clearRect (0,0,canvas.width,canvas.height);

        ctx.arc(100,100,80,1.5*Math.PI,(i/73)*Math.PI);

        ctx.stroke();

        ctx.fillText(i+"%", 100, 100);      

        i++;        

    }       

})();

});