Эмёрдж 1.1 с собственным спиннером и поддержкой кастомных

Вышла новая версия Эмёрджа.

Он больше не требует spin.js для рисования индикатора загрузки — есть встроенный в виде незамкнутого колечка. Появилась поддержка пользовательских индикаторов. В том числе, можно продолжать использовать spin.js.

Как и раньше, чтобы на месте загружаемого элемента изображался спиннер, нужно написать data-spin="true". Видом спиннера управляют новые параметры: data-spin-size, data-spin-color, data-spin-direction (см. документацию на странице Эмёрджа).

Чтобы использовать другой индикатор, например, один из кайфных индикаторов Сэма Херберта, достаточно завернуть его код в именованный див:

<div id="cool-spinner" style="display: none">
  <svg> ... </svg>
</div>

и сказать Эмёрджу, что содержимое этого дива надо использовать в качестве индикатора загрузки:

<div class="emerge" data-spin-element="cool-spinner">
  <!-- контент, во время загрузки которого показывается индикатор -->
</div>

Чтобы использовать spin.js по-старинке, заведите его внутри вашего дива, не забыв выровнять по центру:

<script src="/path/to/spin.js"></script>

  ...

<div id="spinjs-spinner" style="display: none">
  <div style="position: absolute; left: 50%; top: 50%; margin: -8px"></div>
</div>

<script>
  var spinner = new Spinner ({
    lines: 12,
    length: 4,
    width: 2,
    radius: 8,
    corners: 0,
    rotate: 0,
    color: 'rgba(96, 96, 96, .75)',
    hwaccel: true
  })
  spinner.spin ($ ('#spinjs-spinner div')[0])
</script>

  ...

<div class="emerge" data-spin-element="spinjs-spinner">
  <!-- контент, во время загрузки которого показывается индикатор -->
</div>

Если вы покупали Эмёрдж, вы бесплатно получаете и обновление. Напишите мне и укажите домен, для которого покупали, или просто скачайте новую версию по той же ссылке, что и в прошлый раз.