Prelodr

A simple Material preloader inspired in Google Inbox.

Notice: Prelodr v2 is actually in development. If you looking for previous version check out v1 branch.

Install

$ npm install prelodr --save-dev

Usage

const pre = require('prelodr')()

// a) Show prelodr
pre.show('Loading...')

// b) Hide prelodr
pre.hide()

Setup

Constructor supports two params, container (it should be a HTMLElement, by default is document.body) and options (simple hash object). It's also possible to pass a options or container only.

// 1) Passing container param only
const pre = Prelodr(document.getElementById('mycontainer'))
pre.show('Passing container...')

// 2) Passing a container and options
const pre = Prelodr(document.getElementById('mycontainer'), {
  prefixClass: 'mypreloader'
})
pre.show('Passing container and options...')

// 3) Passing container or options params only
const pre = Prelodr({
  prefixClass: 'mypreloader'
})
pre.show('Passing options only...')

Async and chaining support

show(fn) method supports an optional (fn) callback function.

const pre = Prelodr()

// Step 1
pre
  .show('Initializing...')
  .hide(done => {
    console.log(' 1 second delay... ')
    setTimeout(() => {
      done()
    }, 1000)
  })

// Step 2
pre
  .show('Processing...')
  .hide(done => {
    console.log(' 2 seconds delay... ')
    setTimeout(() => {
      done()
    }, 3000)
  })

// Step 3
pre
  .show('Closing...')
  .hide()

Options

duration : Timing for show and hide transition.
prefixClass : Prefix class for prelodr. Default is prelodr class.

Methods

Prelodr.show(text)

Show the prelodr.

text {String} : Text for prelodr.

Prelodr.hide(fn)

Hide the prelodr.

fn {Function} : (Optional) Callback function

Prelodr.setOptions(options)

options {Object} : The custom options.

Prelodr.setContainer(element)

element {HTML Element} : The element container. Default is document.body.

Events

Prelodr.on('shown', fn)

Event when prelodr is shown.

Prelodr.on('hidden', fn)

Event when prelodr is hidden.

Changelog

Check out the changelog

Contributions

If you would like to contribute pull requests and issues will be welcome! Feature requests are welcome too. Please before sending some feature requests make sure provide as much detail and context as possible.

License

MIT license

sekouzed/prelodr