Красивые загрузчики использующие HTML5 canvas.
В демо приведено уже довольно много симпатичных вариантов прелоадеров, но с помощью javascript файла 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);