Пример









Особенности

Принцип действия

Spin.js использует CSS3 для вывода интерфейса, а для Internet Explorer - VML. Если браузер поддерживает правила @keyframe, то они используются для анимации индикатора.

Использование

var opts = {
  lines: 12, // Количество выводимых линий
  length: 7, // Длина каждой линии
  width: 5, // Ширина линии
  radius: 10, // Радиус внутреннего круга
  color: '#000', // #rbg или #rrggbb
  speed: 1, // Вращений в секунду
  trail: 100, // Процент следового свечения
  shadow: true // Наличие тени у каждой линии
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

Метод spin() создает необходимые элементы HTML и запускает анимацию. Если в качестве аргумента указан целевой элемент, то индикатор будет добавлен к нему как первый наследник с центрированием по горизонтали и вертикали.

Ручное позиционирование

Чтобы вручную позиционировать индикатор, вызывайте метод spin() без аргументов и используйте свойство el для доступа к элементу HTML:

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

Возвращаемый элемент DIV имеет свойство position:relative и не имеет значения высоты. Центр индикатора позиционируется в верхний левый угол данного элемента DIV.

Скрытие индикатора

Чтобы скрыть индикатор, вызывайте метод stop(). Он удаляет элементы интерфейса из структуры DOM и останавливает анимацию. Остановленный индикатор можно исопльзовать повторно, вызвав метод spin().

Плагин jQuery

Spin.js не зависит от jQuery. Но если вы используете jQuery (или zepto.js), то можете задействовать следующий плагин:

$.fn.spin = function(opts) {
  this.each(function() {
    var $this = $(this),
        spinner = $this.data('spinner');

    if (spinner) spinner.stop();
    if (opts !== false) {
      opts = $.extend({color: $this.css('color')}, opts);
      spinner = new Spinner(opts).spin(this);
      $this.data('spinner', spinner);
    }
  });
  return this;
};

Поддерживаемые браузеры

Spin.js успешно прошел тестирование в следующих браузерах:

s