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.

View demo

$ npm install prelodr --save-dev

const pre = require('prelodr')()

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

// b) Hide prelodr
pre.hide()

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...')

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

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

Show the prelodr.

• text {String} : Text for prelodr.

Hide the prelodr.

• fn {Function} : (Optional) Callback function

• options {Object} : The custom options.

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

Event when prelodr is shown.

Event when prelodr is hidden.

Check out the changelog

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.

MIT license

© 2016 José Luis Quintana