Прелоадер - preloader

Красивые загрузчики использующие HTML5 canvas.
В демо приведено уже довольно много симпатичных вариантов прелоадеров, но с помощью jаvascript файла sonic (размером около 3 Кб в сжатом состоянии) можно создать и собственные анимации загрузки. Лучше всего sonic работает с анимацией ввиде "змейки". Пути движения "змейки" можно задать используя функции дуг, Безье или линии.
Для квадратного прелоадера:

var square = new Sonic({
 
    width: 100,
    height: 100,
 
    fillColor: '#000',
 
    path: [
        ['line', 10, 10, 90, 10],
        ['line', 90, 10, 90, 90],
        ['line', 90, 90, 10, 90],
        ['line', 10, 90, 10, 10]
    ]
 
});
 
square.play();
 
document.body.appendChild(square.canvas);

var circle = new Sonic({
 
    width: 50,
    height: 50,
    padding: 50,
 
    strokeColor: '#000',
 
    pointDistance: .01,
    stepsPerFrame: 3,
    trailLength: .7,
 
    step: 'fader',
 
    setup: function() {
        this._.lineWidth = 5;
    },
 
    path: [
        ['arc', 25, 25, 25, 0, 360]
    ]
 
});
 
circle.play();
 
document.body.appendChild(circle.canvas);

Также можно самим определить шаг функции.