Natural Polyglot Machine

    spinein

    0.0.2 • Public • Published

    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);

    Install

    npm i spinein

    DownloadsWeekly Downloads

    2

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • renatorib