is-loading

!Node
!Downloads


> 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.

$3

Vanilla javascript

``js
import isLoading from 'is-loading';

`

$3

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

$3

Install via yarn

yarn add is-loading

or npm

npm install is-loading

$3

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.

`js
isLoading(targetElement, options);
`

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

`js
isLoading(options);
`

`js
import isLoading from 'is-loading';
`

➖ targetElement ( DOMElement )

📝 The first parameter is expected to be a DOMElement.

💡 example

`js
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
`js
const optionsDefault = {
'type': 'switch', // switch | replace | full-overlay | overlay
'text': 'loading', // Text to display in the loader
'disableSource': true, // true | false
'disableList': []
};
`

💡 example

`js
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
`

$3

#### #loading

Show the loader

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

// or

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

#### #remove

Remove the loader

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

// or

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

$3

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