Exploadr!

A javscript utility to easily add loading overlays to elements.

Usage

import Exploadr from 'exploadr'

// Optionally import default styling
import 'exploadr/src/css/exploadr.css';

// Initialise the loader
const element = document.getElementById('my-element');
const loader = new Exploadr(element);

// Show the loader
loader.start();

// Do something, then stop the loader
setTimeout(() => loader.stop(), 5000);

Arguments

selector string|element The element to add an overlay to. default: body

options object Options object (see below)

Options

innerHTML string The HTML to be displayed within the loader default: <div><p><i class="fa fa-circle-o-notch fa-2x fa-spin"></i></p><p>Loading...</p></div>

wrapClass string The class for the loader wrapper default: exploadr-loader-wrap

innerClass string The class for the loader content default: exploadr-inner

inClass string The class for the loader wrapper 'in' state default: in

hasClass string The class to be added to the element when it has an active loader default: has-exploadr

Methods

show () Exploadr Adds + shows the loader overlay

hide () Exploadr Removes + hides the loader overlay

Events

exploadradd Fires when the loader overlay element is added to the DOM but before it has shown.

exploadrwillshow Fires before the loader overlay is shown.

exploadrshow Fires when the loader overlay is shown and any transitions have ended.

exploadrwillhide Fires before the loader overlay is hidden.

exploadrhide Fires when the loader overlay is hidden and any transitions have ended.

exploadrremove Fires when the loader overlay element is removed from the DOM.

Notes

• The default innerHTML defined in the options hash assumes you are using FontAwesome 5 icons. FontAwesome 5 is NOT a dependency however - you will need to either include it yourself or set the innerHTML to soemthing different.
• If the element the loader is added to has position: static it will be changed to position: relative when the loader is shown, and reverted afterwards.
• There are some default stylesheets included in /dist/css/exploadr.css.
• This package is designed to be used with webpack and babel. The main entry in package json points to the ES6 module in /src. If this causes problems with your build process you can find the transpiled and bundled code in the /dist folder.