A simple Material preloader inspired by Google Inbox.

🎉 View demo on Codepen

For React style check out react-prelodr.

Yarn

yarn add prelodr --dev

NPM

npm install prelodr --save-dev

The UMD and style files are also available on unpkg:

<link href="https://unpkg.com/prelodr/dist/prelodr.min.css">
<script src="https://unpkg.com/prelodr/dist/prelodr.min.js"></script>

Available on JSDelivr

<link href="https://cdn.jsdelivr.net/npm/prelodr@latest/dist/prelodr.min.css">
<script src="https://cdn.jsdelivr.net/npm/prelodr@latest/dist/prelodr.min.js"></script>

Available on cdnjs

<link href="https://cdnjs.cloudflare.com/ajax/libs/prelodr/2.1.1/prelodr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prelodr/2.1.1/prelodr.min.js"></script>

You can use the library via window.prelodr.

const pre = require('prelodr')()

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

// b) Hide prelodr
pre.hide()

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

• container : Container element to append the preloader.
• zIndex : zindex style value.
• auto : If it's true preloader shows automaticatly. Default false
• duration : Timing for show and hide transition.
• text: Default showing text.
• 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 {String} : Set the prefix class.

• miliseconds {Number} : Set the transition timing

• zindex {Number} : Set the zindex style value.

Return the {HTMLElement} object.

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

© 2017 José Luis Quintana