Introduction

This library allowed you to display loading overlay for your application easily and beautifully.

It contains 52 spinner icons you can choose. JS loading overlay using awesome spinner from Load Awesome. Credit to Load Awesome.

You can use this library to display loading overlay for AJAX request and other things.

This library is very lightweight. The size only 7KB after compressed. No jQuery.

Installation

NPM

						
npm install --save js-loading-overlay
						
					

Yarn

						
yarn add js-loading-overlay
						
					

Without Yarn and NPM

• Copy the js-loading-overlay.min.js script or js-loading-overlay.js script inside dist folder into your application.
• You can get the file from here.
• Or you can use the script directly from CDN here.
• The script end with min.js is the script after compressed. Recommended to use it in production.

Now you can start using it. Go to Usage section to start using it.

Changelog

All the change are documented in Github. You can view Github

Usage

Import using ES6 module

If you import using ES6 module you can use this library in framework like Vue.js, ReactJS, Angular and other framework.

						
// Import the script.
import 'js-loading-overlay'

// Show the loading overlay with default config.
JsLoadingOverlay.show();

// Hide the loading overlay.
JsLoadingOverlay.hide();
						
					

Load using script tag

						
// Import the script from your local.
<script src="js-loading-overlay.min.js"></script>
// OR
// Import the script from the CDN.
<script src="https://cdn.jsdelivr.net/npm/js-loading-overlay@1.1.0/dist/js-loading-overlay.min.js"></script>

// Show the loading overlay with default config.
JsLoadingOverlay.show();

// Hide the loading overlay.
JsLoadingOverlay.hide();
						
					

Show Loading Overlay

						
var configs = {
	'overlayBackgroundColor': '#666666',
	'overlayOpacity': 0.6,
	'spinnerIcon': 'ball-circus',
	'spinnerColor': '#000',
	'spinnerSize': '3x',
	'overlayIDName': 'overlay',
	'spinnerIDName': 'spinner',
	'offsetY': 0,
	'offsetX': 0,
	'lockScroll': false,
	'containerID': null,
};

JsLoadingOverlay.show(configs);
						
					

Hide Loading Overlay

						
JsLoadingOverlay.hide();
						
					

Set Options

You can use the setOptions method to override the default options.

Useful if you want to display the loading overlay in multiple page and you want to set the options one time only

						
// Override the default options.
// Imagine you have multiple page need to show the loading overlay.

// App.js file. The main js file for you application.
// You set the options one time only.
JsLoadingOverlay.setOptions({
	'overlayBackgroundColor': '#666666',
	'overlayOpacity': 0.6,
	'spinnerIcon': 'cog',
	'spinnerColor': '#000',
	'spinnerSize': '2x',
	'overlayIDName': 'overlay',
	'spinnerIDName': 'spinner',
	'offsetY': 0,
	'offsetX': 0,
	'lockScroll': false,
	'containerID': null,
});

// Other place you want to display the loading overlay.
// Only need to call JsLoadingOverlay.show(). No need to call JsLoadingOverlay.show() with the options again.
// It will display the loading overlay based on the config above.

// Product.js file.
JsLoadingOverlay.show();

// Checkout.js file.
JsLoadingOverlay.show();
						
					

List Of Available Spinner

Default Options

						
{
	'overlayBackgroundColor': '#666666',
	'overlayOpacity': 0.6,
	'spinnerIcon': 'ball-circus',
	'spinnerColor': '#000',
	'spinnerSize': '3x',
	'overlayIDName': 'overlay',
	'spinnerIDName': 'spinner',
	'offsetY': 0,
	'offsetX': 0,
	'lockScroll': false,
	'containerID': null,
	'spinnerZIndex':99999,
	'overlayZIndex':99998
}
						
					

Custom Options

You can use any of the options below to customize the loading overlay according ti your need.

Playground

						
JSLoadingOverlay.show();
						
					

Roadmap

• Timer feature. Able to hide automatically after certain period.
• Able to display loading text with the spinner
• Able to display loading overlay around the container. For example want to display loading overlay next to the button.

Credits

Credit to Load Awesome for the beautiful spinner.