A simple Material preloader inspired by Google Inbox.
JavaScript CSS
Clone or download
Latest commit 7b52e94 Sep 12, 2017
Permalink
Failed to load latest commit information.
dist up pkgs Jul 2, 2017
.gitignore up pkgs Jul 2, 2017
.npmignore up pkgs Jul 2, 2017
.travis.yml test node >= 6 Jul 2, 2017
LICENSE.md up pkgs Jul 2, 2017
README.md Update jsDelivr links Sep 12, 2017
index.js up pkgs Jul 2, 2017
index.scss up pkgs Jul 2, 2017
package.json v2.1.1 Jul 2, 2017
rollup.config.js up pkgs Jul 2, 2017
test.js up pkgs Jul 2, 2017
yarn.lock up pkgs Jul 2, 2017

README.md

Prelodr Build Status Coverage Status js-standard-style CDNJS version

A simple Material preloader inspired by Google Inbox.

Prelodr preview

🎉 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