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
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.
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 scriptShow the loader
const loader = isLoading($elt, options);
loader.loading();
// or
isLoading($elt, options).loading();Remove the loader
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 <script> tag on your page. The UMD builds make is-loading available as a window.isLoading global variable.
The code is available under the MIT license.
We are open to contributions, see CONTRIBUTING.md for more info.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent