7 224 Скрипты / Loading

Прелоадер - 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);

А это код для круглой "змейки":

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

Скачать 1742Загрузок 4,03 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи