Prelodr

A simple Material preloader inspired by Google Inbox.

🎉 View demo on Codepen

For React style check out react-prelodr.

Install

Yarn

yarn add prelodr --dev

NPM

npm install prelodr --save-dev

CDN

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.

Usage

const pre = require('prelodr')()

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

// b) Hide prelodr
pre.hide()

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

• 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.

Methods

Prelodr.show(text)

Show the prelodr.

• text {String} : Text for prelodr.

Prelodr.hide(fn)

Hide the prelodr.

• fn {Function} : (Optional) Callback function

Prelodr.setPrefixClass(prefix)

• options {String} : Set the prefix class.

Prelodr.setDuration(miliseconds)

• miliseconds {Number} : Set the transition timing

Prelodr.setZIndex(zindex)

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

Prelodr.getElement()

Return the {HTMLElement} object.

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

© 2017 José Luis Quintana