By default all modes accept a DOM element as the first parameter, and the option object as the second.
isLoading(targetElement, options);
Full overlay mode is an exception and only has the option as a parameter.
isLoading(options);
defaults = {
'type': 'switch', // switch | replace | full-overlay | overlay
'text': 'loading', // Text to display
'disableSource': true, // true | false
'disableList': [] // Array of elements to set as 'disabled'
};
This is the most basic setup.
It will set the target as disabled by default (either a CSS .disabled class or a disabled attribute in case of form button).
container
test
// ES6/ES2015
import isLoading from 'is-loading';
const button = document.querySelector('.btn');
button.addEventListener('click', function(e) {
// start the loading script
isLoading(e.target).loading(); // or isLoading(button).loading()
setTimeout(function() {
// stop the loading script
isLoading(e.target).remove(); // or isLoading(button).remove()
}, 1000 );
});
// ES5
var button = document.querySelector('.btn');
button.addEventListener('click', function(e) {
// start the loading script
isLoading(e.target).loading(); // or isLoading(button).loading()
setTimeout(function() {
// stop the loading script
isLoading(e.target).remove(); // or isLoading(button).remove()
}, 1000 );
});
// jQuery
var button = $('.btn')[0];
button.addEventListener('click', function(e) {
// start the loading script
isLoading(e.target).loading(); // or isLoading(button).loading()
setTimeout(function() {
// stop the loading script
isLoading(e.target).remove(); // or isLoading(button).remove()
}, 1000 );
});
How to use to disable other DOM elements
// ES6/ES2015
import isLoading from 'is-loading';
const $button = document.querySelector('input[type="submit"]');
const $username = document.querySelector('#username');
const $password = document.querySelector('#password');
const options = {
'type': 'switch', // switch | replace | full-overlay | overlay
'text': 'login...', // Text to display in the loader
'disableSource': true, // true | false
'disableList': [$username, $password]
};
$button.addEventListener('click', function(e) {
isLoading($button).loading(); // start the loading script
setTimeout(function() {
isLoading($button).remove(); // stop the loading script
}, 1000 );
});
// ES5
var $button = document.querySelector('input[type="submit"]');
var $username = document.querySelector('#username');
var $password = document.querySelector('#password');
const options = {
'type': 'switch', // switch | replace | full-overlay | overlay
'text': 'login...', // Text to display in the loader
'disableSource': true, // true | false
'disableList': [$username, $password]
};
$button.addEventListener('click', function(e) {
isLoading($button).loading(); // start the loading script
setTimeout(function() {
isLoading($button).remove(); // stop the loading script
}, 1000 );
});
// jQuery
var $button = $('input[type="submit"]')[0];
var $username = $('#username')[0];
var $password = $('#password')[0];
const options = {
'type': 'switch', // switch | replace | full-overlay | overlay
'text': 'login...', // Text to display in the loader
'disableSource': true, // true | false
'disableList': [$username, $password]
};
$button.addEventListener('click', function(e) {
isLoading($button).loading(); // start the loading script
setTimeout(function() {
isLoading($button).remove(); // stop the loading script
}, 1000 );
});
This demo shows how to show the loading message inside the target.
container
// ES6/ES2015
import isLoading from 'is-loading';
const button = document.querySelector('.btn');
const targetElement = document.querySelector('.demo .alert');
const load = isLoading(targetElement, {
type: 'target',
disableList: [button]
});
button.addEventListener('click', function(e) {
// start the loading script
load.loading();
setTimeout(function() {
// Deactivate the loading script
load.remove();
}, 1000 );
});
// ES5
var button = document.querySelector('.btn');
var targetElement = document.querySelector('.demo .alert');
var load = isLoading(targetElement, {
type: 'target',
disableList: [button]
});
button.addEventListener('click', function(e) {
// start the loading script
load.loading();
setTimeout(function() {
// Deactivate the loading script
load.remove();
}, 1000 );
});
// jQuery
var button = $('.btn')[0];
var targetElement = $('.demo .alert')[0];
var load = isLoading(targetElement, {
type: 'target',
disableList: [button]
});
button.addEventListener('click', function(e) {
// start the loading script
load.loading();
setTimeout(function() {
// Deactivate the loading script
load.remove();
}, 1000 );
});
Cover the whole window with an overlay
container
test
// ES6/ES2015
import isLoading from 'is-loading';
// start the loading script
isLoading().loading();
// Deactivate the loading script
isLoading().remove();
// ES5
// start the loading script
isLoading().loading();
// Deactivate the loading script
isLoading().remove();
// jQuery
// start the loading script
isLoading().loading();
// Deactivate the loading script
isLoading().remove();
Cover target element with an overlay.
container
test
// ES6/ES2015
import isLoading from 'is-loading';
const button = document.querySelector('.btn');
const targetElement = document.querySelector('.demo .alert');
const load = isLoading(targetElement, { type: 'overlay' });
button.addEventListener('click', function(e) {
// start the loading script
load.loading();
setTimeout(function() {
// Deactivate the loading script
load.remove();
}, 2500 );
});
// ES5
var button = document.querySelector('.btn');
var targetElement = document.querySelector('.demo .alert');
var load = isLoading(targetElement, { type: 'overlay' });
button.addEventListener('click', function(e) {
// start the loading script
load.loading();
setTimeout(function() {
// Deactivate the loading script
load.remove();
}, 2500 );
});
// jQuery
var button = $('.btn')[0];
var targetElement = $('.demo .alert')[0];
var load = isLoading(targetElement, { type: 'overlay' });
button.addEventListener('click', function(e) {
// start the loading script
load.loading();
setTimeout(function() {
// Deactivate the loading script
load.remove();
}, 2500 );
});