Small helper to give the user a visual feedback that something is happening
npm install 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.
Vanilla javascript
``js
import isLoading from 'is-loading';
`
http://hekigan.github.io/is-loading/
Install via yarn
yarn add is-loading
or npm
npm install is-loading
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.
š” defaultjs`
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
`
#### #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();
`
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