Google Inbox Inspired Preloader With Pure JavaScript – Prelodr

Prelodr is a native JavaScript library (also can be used as a jQuery plugin) that helps create a Google Inbox style content preloader with async and chaining support.

Installation:

# NPM
$ npm install Prelodr --save

Basic usage:

Load the following JavaScript and CSS files in your html file.

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

Show a preloader on the page.

prelodr.in('Loading...');

Dismiss the preloader.

prelodr.out();

Create a preloader on a specific element.

var prelodr = new Prelodr(document.getElementById('myContainer'));
prelodr.in('Loading...');

Pass the following options as the second paramters to the Prelodr.

var prelodr = new Prelodr(document.getElementById('myContainer'),{
    // Timing for show and hide transition.
    duration: 750,
    // Prefix class for prelodr.
    prefixClass: 'prelodr',
    // Callback when prelodr is shown.
    show: null,
    // Callback when prelodr is hidden.
    hide: null
});
prelodr.in('Loading...');

API methods.

// Sets options.
Prelodr.setOptions(options)
// great for Async and chaining support
Prelodr.out(callback function here)
// The element container. Default is document.body.
Prelodr.setContainer(element)
// Checks if Prelodr is visible.
Prelodr.isVisible()

Changelog:

08/20/2018

• v2.1.1