Simple loading animation in HTML5 canvas

I would use a loading GIF generated by an online tool such as Ajaxload.info or Preloaders.net and place it in a div tag that you may toggle in front of the canvas element.

For more spinner generator scripts see 5 Online Loading AJAX Spinner Generator Tools.

Hope this helps!

 drawProgressIndicator: function(){

    var can = this.imgCanvas;
    var ctx = this.imgCtx;

    ctx.save();
    ctx.clearRect(0, 0, can.width, can.height);
    ctx.translate(can.width / 2, can.height / 2);
    ctx.scale(0.4, 0.4);
    ctx.rotate(-Math.PI / 2);
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.lineWidth = 8;
    ctx.lineCap = "round";
    var step = this.animationStep;
    ctx.fillStyle = "black";
    ctx.save();
    ctx.rotate(step * Math.PI / 30);
    ctx.strokeStyle = "#33ccff";
    ctx.fillStyle = "#33ccff";
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(68, 0);
    ctx.stroke();
    ctx.fill();
    ctx.restore();
    ctx.beginPath();
    ctx.lineWidth = 14;
    ctx.strokeStyle = 'gray';
    ctx.arc(0, 0, 80, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.restore();
    this.animationStep += 1;
},