spin.js — это декоративный универсальный лоадер (loader). Это та самая штука, которая крутится-вертится, намекая пользователю, что нужно чутка подождать, идет загрузка.

gif-loaderТрадиционно в качестве лоадеров принято использовать анимированные gif-картинки, но данный подход имеет одно, но очень существенное ограничение. Из-за того, что формат gif не предусматривает полупрозрачности, на неоднородном фоне мы можем наблюдать «рваные границы» такого лоадера.

Альтернативой до поры до времени служила анимация из png-файлов, однако данный подход уже не такой простой в реализации и занимает некоторое время.

Удачным решением оказался простенький скрипт spin.js, использующий средства javascript и css, что так же позволяет его гибко настраивать, создавая большое количество разнообразных форм.

На сайте скрипта можно его попробовать в действии, покрутить ползунки и даже сохранить результат.

spin.js не требует никаких дополнительных библиотек, хотя на всякий случай имеется плагин для jquery.

Использовать скрипт очень просто. Подключаем сам скрипт (скачать можно по ссылке).

<script src="js/spin.min.js"></script>

Затем в html создаем контейнер с любым id:

<div id="loader"></div>

В любом javascript-скрипте присваиваем его переменной:

var target = document.getElementById('loader');

Указываем параметры:

var opts = {
  lines: 5, // число линий для отрисоки
  length: 0, // длинна каждой линии
  width: 30, // ширина линий
  radius: 21, // радиус внутреннего круга
  corners: 1, // радиус скругления границ
  rotate: 0, // поворот
  direction: 1, // направление движения: 1: по часовой, -1: против часовой
  color: '#000', // цвет: #rgb или #rrggbb или массив цветов
  speed: 1, // скорость вращения
  trail: 56, // процент скорости затухания
  shadow: false, // тени
  hwaccel: false, // аппаратное ускорение
  className: 'spinner', // дополнительный CSS-класс
  zIndex: 2e9, // z-index (вплоть до 2000000000)
  top: '50%', // отступ сверху
  left: '50%' // отступ слева
};

И наконец создаем наш лоадер:

var spinner = new Spinner(opts).spin(target);

Вот и все, можно наслаждаться результатом.

Я использую данный скрипт уже давно, во множестве своих проектов и очень им доволен. После загрузки всех скриптов и изображений можно его убрать примерно так:

$(window).load(function(){
	$("#loader").fadeOut(300, function(){
		spinner.stop(); // останавливаем лоадер
		$(this).remove(); // убиваем его
		$(".wrapper").fadeIn(300, function(){ // показываем весь контент
			// какой-то код после отображения всего контента
		});
	});
});