loadings v0.0.3

Loadings

Some canvas loadings like jxnblk/loading

chemzqm.github.io/loadings/

Why canvas?

• Better support for browsers http://caniuse.com/#canvas
• Better performance
• Control via javascript

Usage

npm i loadings

You can use one of them like require('loadings/lib/dots'), some bundle tools like webpack, would build only the parts you need.

Example

var dots = require('loadings/lib/dots')
function $(id) {
  return document.getElementById(id)
}

var s = dots(document.getElementById('dots'))

// when you want to stop
s.stop()

API

.dots(parentNode, options)

.bars(parentNode, options)

.wander(parentNode, options)

.spin(parentNode, options)

.spokes(parentNode, options)

.bubbles(parentNode, options)

• parentNode the parentNode for canvas render
• options optional options
• options.color the fill color for loading region
• options.duration anmation duration in milisecond
• options.radius set the radius for animate region, works only with spin bubbles spokes

loading.stop()

stop the animation