Awesome Open Source
Awesome Open Source


Node NPM Travis David Coverage Status 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

import isLoading from 'is-loading';

Examples and Demo


Install via yarn

yarn add is-loading

or npm

npm install is-loading


You can pass in extra options as a configuration


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.

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

// Stop the script

āž– 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 script



Show the loader

const loader = isLoading($elt, options);

// or

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


Remove the loader

const loader = isLoading($elt, options);

// 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 for more info.

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (66,008)Ā 
loader (154)Ā 
loading (102)Ā 
overlay (67)Ā 

Find Open Source By Browsing 7,000 Topics Across 59 Categories