This will make a nice semi transparent spinner for you.
var spinnyCanvas = function(left, top) {
var conti = false;
var self = this;
this.stop = function() {
this.conti = false;
}
this.start = function() {
console.log(self.conti)
if (!self.conti) {
self.conti = true;
draw();
}
}
var dim = 48
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
document.body.appendChild(canvas)
canvas.height= dim
canvas.width = dim
canvas.theta = 0
canvas.dtheta = -.09
canvas.style.position = 'fixed'
canvas.style.top = top + 'px'
canvas.style.left= left + 'px'
var draw = function() {
canvas.width = canvas.width
var r = dim / 16
var x, y
var i, L = 5
for (i = 0; i < L; i++) {
x = dim / 2 + dim * .3 * Math.sin(canvas.theta + i * 1.1 * Math.PI / L)
y = dim / 2 + dim * .3 * Math.cos(canvas.theta + i * 1.1 * Math.PI / L)
context.beginPath()
context.fillStyle = "rgba(128,128,128," + (1 - i / L) + ")"
context.arc(x, y, r, 0, 2*Math.PI, false)
context.fill()
context.closePath()
}
canvas.theta += canvas.dtheta
if (self.conti) {
requestAnimationFrame(draw)
}
}
return this
}