Home > Loading > Prelodr – Preloader Inspired in Google Inbox
Prelodr - Preloader Inspired in Google Inbox

Prelodr – Preloader Inspired in Google Inbox

A simple, awesome Material Design preloader with javascript inspired in Google Inbox.

Install

CommonJS

npm install prelodr --save-dev

AMD

requirejs(['prelodr'], Prelodr => {

})

Browser

Bower
bower install prelodr --save
CDN

The UMD and style files are also available on unpkg:

<link href="https://unpkg.com/prelodr/dist/prelodr.min.css">
<script src="https://unpkg.com/prelodr/dist/prelodr.min.js"></script>

Available on JSDelivr

<link href="https://cdn.jsdelivr.net/prelodr/latest/prelodr.min.css">
<script src="https://cdn.jsdelivr.net/prelodr/latest/prelodr.min.js"></script>

Available on cdnjs

<link href="https://cdnjs.cloudflare.com/ajax/libs/prelodr/2.1.0/prelodr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prelodr/2.1.0/prelodr.min.js"></script>

You can use the library via window.Prelodr.

Usage

const pre = require('prelodr')()

// a) Show prelodr
pre.show('Loading...')

// b) Hide prelodr
pre.hide()

Async and chaining support

show(fn) method supports an optional (fn) callback function.

const pre = Prelodr()

// Step 1
pre
  .show('Initializing...')
  .hide(done => {
    console.log(' 1 second delay... ')
    setTimeout(() => {
      done()
    }, 1000)
  })

// Step 2
pre
  .show('Processing...')
  .hide(done => {
    console.log(' 2 seconds delay... ')
    setTimeout(() => {
      done()
    }, 3000)
  })

// Step 3
pre
  .show('Closing...')
  .hide()

Options

  • container : Container element to append the preloader.
  • zIndex : zindex style value.
  • auto : If it’s true preloader shows automaticatly. Default false
  • duration : Timing for show and hide transition.
  • text: Default showing text.
  • prefixClass : Prefix class for prelodr. Default is prelodr class.
  Website Demo

About admin