is-loading
![Downloads](https://img.shields.io/npm/dm/is-loading.svg)
![NPM](https://nodei.co/npm/is-loading.png?downloads=true&downloadRank=true&stars=true)
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"]');
isLoading($elt).loading();
isLoading($elt).remove();
➖ options ( Object )
📝 The second parameter is an Object to set options.
💡 default
const optionsDefault = {
'type': 'switch',
'text': 'loading',
'disableSource': true,
'disableList': []
};
💡 example
import isLoading from 'is-loading';
const $button = document.querySelector('input[type="submit"]');
const $username = document.querySelector('#username');
const $password = document.querySelector('#password');
options = {
'type': 'switch',
'text': 'login...',
'disableSource': true,
'disableList': [$username, $password]
};
const loader = isLoading($button, options);
loader.loading();
loader.remove();
isLoading($button, options).loading();
isLoading($button, options).remove();
methods
#loading
Show the loader
const loader = isLoading($elt, options);
loader.loading();
isLoading($elt, options).loading();
#remove
Remove the loader
const loader = isLoading($elt, options);
loader.remove();
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.