jQuery Plugin For Creating Google Inbox Inspired Preloader - Prelodr

Prelodr is a preloader plugin for jQuery that helps you create Material Design-style preloaders with async and chaining support as you seen on Google Inbox. Also can be implements in pure JavaScript.

How to use it:

1. Add the Prelodr's JavaScript and CSS files into your webpage.

<link rel="stylesheet" href="dist/prelodr.min.css">
<script src="dist/prelodr.js"></script>

2. To implement the Prelodr as a jQuery plugin, you must have jQuery library loaded.

<script src="//code.jquery.com/jquery.min.js"></script>

3. Create a new preloader that covers the whole webpage.

$('body').prelodr({
  // options here
});

4. Show the preloader.

$('body').prelodr('in', 'loading...');

5. Hide the preloader.

$('body').prelodr('out');

6. Plugin's default options.

$('body').prelodr({

  // transition duration in ms
  duration: 750,

  // prefix CSS class
  prefixClass: 'prelodr',

  // callbacks
  show: null,
  hide: null
  
});

7. You can also add a callback function to the 'out' method which is useful for async and chaining support.

$('body').prelodr('out', function (done) {
  setTimeout(function () {
    done();
  }, 1200);
});

8. More API methods.

// sets options
$('body').prelodr('setOptions', OPTION);

// checks if is visible
// returns true or false
$('body').prelodr('isVisible');

9. If you want to implement the Prelodr in pure JavaScript, check out the demos in the zip for more details.

---

This awesome jQuery plugin is developed by quintana-dev. For more Advanced Usages, please check the demo page or visit the official website.