Google Inbox Inspired Preloader With Pure JavaScript – Prelodr

Category: Javascript , Loading | August 20, 2018
Author: quintana-dev
Views Total: 2,470
Official Page: Go to website
Last Update: August 20, 2018
License: MIT

Preview:

Google Inbox Inspired Preloader With Pure JavaScript – Prelodr

Description:

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

You Might Be Interested In:


Leave a Reply