Craftworks/canvas_loading_icon.html

## canvas_loading_icon.html
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">

    var LoadingIcon = function() { this.initialize.apply(this, arguments) };
    LoadingIcon.prototype = {
        initialize: function(rgb) {
            var element = document.createElement('canvas'),
                ctx = element.getContext('2d');
            element.width  = 20;
            element.height = 20;
            this.element = element;
            ctx.translate(10, 10);
            ctx.rotate(-Math.PI/2);
            this.ctx = ctx;
            this.rgb = rgb || '0, 0, 0';
            this.alpha = [ 1.0, 0.8, 0.6, 0.3, 0.3, 0.2, 0.1, 0.1 ];
        },
        drawCircle: function() {
            var ctx = this.ctx;
            ctx.clearRect(-10, -10, 20, 20);
            for ( i in this.alpha ) {
                this.drawBar(this.alpha[i]);
            }
            ctx.rotate(Math.PI/4);
        },
        drawBar: function(alpha) {
            var ctx = this.ctx;
            ctx.fillStyle = 'rgba(' + this.rgb + ',' + alpha + ')';
            ctx.rotate(-Math.PI/4);
            ctx.beginPath();
            ctx.arc(3, 3, 1, 0, Math.PI * 2, true);
            ctx.arc(4, 4, 1, 0, Math.PI * 2, true);
            ctx.fill();
        },
        start: function() {
            var self = this;
            this.timer = window.setInterval(function() {
                self.drawCircle();
            }, 100);
            return this;
        },
        stop : function() {
            window.clearInterval(this.timer);
        }
    };

    var loading = new LoadingIcon();
    loading.start();
    document.body.appendChild(loading.element);
    window.setTimeout(function(){loading.stop()}, 3000);

    document.body.appendChild((new LoadingIcon('128,0,0')).start().element);
    document.body.appendChild((new LoadingIcon('0,128,0')).start().element);
    document.body.appendChild((new LoadingIcon('0,0,128')).start().element);

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<script type="text/javascript">

	var LoadingIcon = function() { this.initialize.apply(this, arguments) };
	LoadingIcon.prototype = {
	initialize: function(rgb) {
	var element = document.createElement('canvas'),
	ctx = element.getContext('2d');
	element.width = 20;
	element.height = 20;
	this.element = element;
	ctx.translate(10, 10);
	ctx.rotate(-Math.PI/2);
	this.ctx = ctx;
	this.rgb = rgb \|\| '0, 0, 0';
	this.alpha = [ 1.0, 0.8, 0.6, 0.3, 0.3, 0.2, 0.1, 0.1 ];
	},
	drawCircle: function() {
	var ctx = this.ctx;
	ctx.clearRect(-10, -10, 20, 20);
	for ( i in this.alpha ) {
	this.drawBar(this.alpha[i]);
	}
	ctx.rotate(Math.PI/4);
	},
	drawBar: function(alpha) {
	var ctx = this.ctx;
	ctx.fillStyle = 'rgba(' + this.rgb + ',' + alpha + ')';
	ctx.rotate(-Math.PI/4);
	ctx.beginPath();
	ctx.arc(3, 3, 1, 0, Math.PI * 2, true);
	ctx.arc(4, 4, 1, 0, Math.PI * 2, true);
	ctx.fill();
	},
	start: function() {
	var self = this;
	this.timer = window.setInterval(function() {
	self.drawCircle();
	}, 100);
	return this;
	},
	stop : function() {
	window.clearInterval(this.timer);
	}
	};

	var loading = new LoadingIcon();
	loading.start();
	document.body.appendChild(loading.element);
	window.setTimeout(function(){loading.stop()}, 3000);

	document.body.appendChild((new LoadingIcon('128,0,0')).start().element);
	document.body.appendChild((new LoadingIcon('0,128,0')).start().element);
	document.body.appendChild((new LoadingIcon('0,0,128')).start().element);

	</script>
	</body>
	</html>