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';
import isLoading from 'is-loading'; const $elt = document.querySelector('input[type="submit"]'); // Start the script isLoading($elt).loading(); // Stop the script isLoading($elt).remove();
const optionsDefault = { 'type': 'switch', // switch | replace | full-overlay | overlay 'text': 'loading', // Text to display in the loader 'disableSource': true, // true | false 'disableList': [] };
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.