is-loading

Simple script to show visual feedback when loading data or any action that would take time. Vanilla script built with ES2015. Exported as CommonJS, ES2015 and UMD. So it should work everywhere.

Usage

Vanilla javascript

import isLoading from 'is-loading';

Examples and Demo

http://hekigan.github.io/is-loading/

Installation

Install via yarn

yarn add is-loading

or npm

npm install is-loading

configuration

You can pass in extra options as a configuration

Parameters:

By default all modes accept a DOM element as the first parameter, and an option object as the second.

isLoading(targetElement, options);

Full overlay mode is an exception with either no parameters or 1 parameter for the option object.

isLoading(options);

import isLoading from 'is-loading';

➖ targetElement ( DOMElement ) 📝 The first parameter is expected to be a DOMElement. 💡 example

import isLoading from 'is-loading';

const $elt = document.querySelector('input[type="submit"]');

// Start the script
isLoading($elt).loading();

// Stop the script
isLoading($elt).remove();

➖ options ( Object ) 📝 The second parameter is an Object to set options. 💡 default

const optionsDefault = {
    'type': 'switch',        // switch | replace | full-overlay | overlay
    'text': 'loading',       // Text to display in the loader
    'disableSource': true,   // true | false
    'disableList': []
};

💡 example

import isLoading from 'is-loading';

// Assuming that we have a login form
const $button = document.querySelector('input[type="submit"]');
const $username = document.querySelector('#username');
const $password = document.querySelector('#password');

options = {
    'type': 'switch',        // switch | replace | full-overlay | overlay
    'text': 'login...',      // Text to display in the loader
    'disableSource': true,   // true | false
    'disableList': [$username, $password]
};

// using a variable
const loader = isLoading($button, options);
loader.loading(); // Start the script
loader.remove(); // Stop the script

// no variable
isLoading($button, options).loading(); // Start the script
isLoading($button, options).remove(); // Stop the script

methods

#loading

Show the loader

const loader = isLoading($elt, options);
loader.loading();

// or

isLoading($elt, options).loading();

#remove

Remove the loader

const loader = isLoading($elt, options);
loader.remove();

// or

isLoading($elt, options).remove();

Builds

If you don't use a package manager, you can access is-loading via unpkg (CDN), download the source, or point your package manager to the url.

is-loading is compiled as a collection of CommonJS modules & ES2015 modules for bundlers that support the jsnext:main or module field in package.json (Rollup, Webpack 2)

The is-loading package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a <script> tag on your page. The UMD builds make is-loading available as a window.isLoading global variable.

License

The code is available under the MIT license.

Contributing

We are open to contributions, see CONTRIBUTING.md for more info.