jQuery Plugin For Creating Google Inbox Inspired Preloader - Prelodr

File Size: 23.7 KB
Views Total: 2655
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  // options here

4. Show the preloader.

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

5. Hide the preloader.


6. Plugin's default options.


  // 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 () {
  }, 1200);

8. More API methods.

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

// checks if is visible
// returns true or false

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.