ML canvas loading spinner

by SebastianPataneMasuelli

HTML

<script src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js ">
    //ie canvas shiv
</script> 

<canvas id="preloader" width="20" height="20">
    
</canvas> 

<div>
    stop
</div>

JavaScript

$('#loading').fadeOut(0);
$('#loading').fadeIn(500);

var ctx;
var drawInterval;
var spokes = 8; // Number of spokes on the wheel

function init() {
    var canvas = document.getElementById('preloader');
    if (canvas.getContext) {
        ctx = canvas.getContext('2d');
        ctx.translate(10, 10); // Center the origin
        ctx.lineWidth = 4;
        ctx.lineCap = "round";
        drawInterval = setInterval(draw, 75);
        return drawInterval;
    }
}

function draw() {

    ctx.clearRect(-10, -10, 20, 20); // Clear the image
    ctx.rotate(Math.PI * 2 / spokes); // Rotate the origin
    for (var i = 0; i < spokes; i++) {
        ctx.rotate(Math.PI * 2 / spokes); // Rotate the origin
        ctx.strokeStyle = "rgba(69,127,191," + i / spokes + ")"; // Set transparency
        ctx.beginPath();
        ctx.moveTo(0, 4);
        ctx.lineTo(0, 8);
        ctx.stroke();
    }
}


init();
    
$('div').click(function() {
    drawIntervalID = clearInterval(drawInterval);
   
});