La balise canvas permet bien des choses. Sur notre site, vous pouvez rencontrer cette balise sur plusieurs pages, et également sous forme d'un loading qui nous permet de vous faire patienter pendant le chargement d'une ressource :)

Voici notre classe JS (MooTools) qui permet de générer notre loading, avec quelques options paramétrables dont : la taille, la couleur et les fps.

Cette classe créé un canvas en mémoire, que vous pouvez ensuite injecter dans votre page, ou bien dessiner dans un autre canvas. Voici le code JS :

var Loading = new Class({
||t||Implements: [Events, Options],

||t||options: {
||t||||t||'size' : 100,
||t||||t||'color' : '#ffffff',
||t||||t||'fps':60
||t||},

||t||initialize: function(options){
||t||||t||this.setOptions(options);
||t||||t||this.canvas = new Element('canvas', {'width' : this.options.size, 'height' : this.options.size});
||t||||t||if (this.canvas.getContext){
||t||||t||||t||this.ctx = this.canvas.getContext("2d");
||t||||t||||t||this.enabled = true;

||t||||t||||t||this.ctx = this.canvas.getContext("2d");
||t||||t||||t||this.radian = Math.PI/180;
||t||||t||||t||this.counter = 0;
||t||||t||||t||this.direction = 1;

||t||||t||||t||this.ctx.strokeStyle = (this.options.color.test(/\#[A-Fa-f0-9]{6}/)) ? this.options.color : '#fff';
||t||||t||||t||this.ctx.lineCap = 'round';
||t||||t||||t||this.ctx.lineWidth = Math.floor(this.options.size/100*5);

||t||||t||||t||this.startAnimation();
||t||||t||}else{
||t||||t||||t||this.enabled = false;
||t||||t||||t||return true;
||t||||t||}
||t||},

||t||drawCircles: function(){
||t||||t||this.ctx.save();
||t||||t||this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

||t||||t||this.ctx.translate(this.canvas.width/2, this.canvas.height/2);

||t||||t||this.drawCircle((this.options.size/12)*1, 3*(Math.PI/2), Math.PI/2, this.counter, 29);
||t||||t||this.drawCircle((this.options.size/12)*2, 3*(Math.PI/2), Math.PI/2, this.counter, 37);
||t||||t||this.drawCircle((this.options.size/12)*3, 2*(Math.PI), 4*Math.PI/5, -this.counter, 16);
||t||||t||this.drawCircle((this.options.size/12)*4, 3*(Math.PI/2), Math.PI/2, this.counter, 12);
||t||||t||this.drawCircle((this.options.size/12)*5, 3*(Math.PI/2), Math.PI/2, -this.counter, 26);

||t||||t||this.counter++;
||t||||t||this.ctx.restore();
||t||},

||t||drawCircle: function(radius, angleStart, angleEnd, direction, speed){
||t||||t||var angleDisplacementUnit = this.radian * (speed / 5 );
||t||||t||this.ctx.beginPath();
||t||||t||this.ctx.arc(0, 0, radius, (angleDisplacementUnit * direction + angleStart), (angleDisplacementUnit * direction + angleEnd), true);
||t||||t||this.ctx.stroke();
||t||},

||t||stopAnimation: function(){
||t||||t||clearInterval(this.timer);
||t||},

||t||startAnimation: function(){
||t||||t||this.timer = this.drawCircles.periodical(1000/this.options.fps, this);
||t||}
});

Suivi de l'intanciation, où vous pouvez spécifier les options que vous souhaitez. (Le code générant une couleur aléatoire est là jsute pour la démo :) 

window.addEvent('domready', function(){
||t||$$('.box').each(function(box, index){
||t||||t||var loading = new Loading({
||t||||t||||t||'size' : 50 + 15 * index,
||t||||t||||t||'color' : getRandomHexa(),
||t||||t||||t||'fps' : 30 + 5 * index
||t||||t||});
||t||||t||loading.canvas.inject(box);
||t||});
});

var colorChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
function getRandomHexa(){
||t||var hexa = '#';
||t||for (var i = 0; i < 6; i++)
||t||||t||hexa += colorChars.getRandom();
||t||return hexa;
}