Google Inbox inspirado preloader con puro JavaScript-Prelodr

Vista prévia

Descripción

Prelodr es una biblioteca nativa de JavaScript (también se puede utilizar como un plugin de jQuery) que ayuda a crear un precargador de contenido de estilo bandeja de entrada de Google con soporte de asincronía y encadenamiento.

Instalación

# NPM
$ npm install Prelodr --save

¿Cómo funciona?

Cargue los siguientes archivos JavaScript y CSS en su archivo HTML.

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

Mostrar un precargador en la página.

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

Descarta el precargador.

prelodr.out();

Cree un precargador en un elemento específico.

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

Pase las siguientes opciones como los segundos parámetros al 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()

Registro de cambios

08/20/2018

• v2.1.1