❤Negotiate Pushing Milestone

npm

Sign UpSign In
Wondering what’s next for npm?Check out our public roadmap! »

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

Keywords

Install

npm i spinein

DownloadsWeekly Downloads

1

Version

0.0.2

License

MIT

Homepage

github.com/renatorib/spine#readme

Repository

Gitgithub.com/renatorib/spine

Last publish

Collaborators

  • avatar
Try on RunKit
Report malware