Spine in

Spine like a shell spinner \ | / -

Why

Fun.

Usage

With presets frames

spine('dots').in('.spinner-div');

spine('triangle').in('.spinner-div');

Check full list of all available prests

With your own frames

spine({
  interval: 100,
  frames: ['\\', '/']
}).in('.spinner-div');

Share spinner

var spinner = spine('dots');
spinner.in('.first-div');
spinner.in('.second-div');

Stop spinning

var spinner = spine('dots').in('.spinner-div');

setTimeout(function(){
  clearInterval(spinner);
}, 5000);

// will stop spinning after 5 seconds

Real Example

[...]
  <div class="spinner"></div>
  <script src="spine.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function(){
      spine('dots').in('.spinner');
    });
  </script>
[...]

Check all examples here

API

spine(spinner).in(element)

String|Object spinner
As string: it will use a preset spinner, you can check all in spine.spinners
As object: it need two properties: frames as array of strings to rotate, and interval as integer of frame interval

// string
spine('dots').in(...)
// object
spine({ frames: ['1', '2'], interval: 100 }).in(...)

String|DOMElement element
As string: it will use document.querySelector to find the DOM Element to use as wrapper of spinner.
As domelement: it will used to wrapper of spinner.

// string
spine(...).in('.wrapper');
// domelement
var wrapper = document.querySelector('.wrapper');
spine(...).in(wrapper);