Configurable Loading Spinner With Pure JS – loadingOverlay.js

loadingOverlay.js is a standalone JavaScript library to create a configurable loading spinner (overlay) with spin handles support.

How to use it:

Import the loadingOverlay.js script into your web page.

<script src="src/loadingOverlay.js"></script>

Display a basic loading spinner that shows for 3 seconds.

var spinHandle = loadingOverlay().activate();
setTimeout(function() {
    loadingOverlay().cancel(spinHandle);
}, 3000);

The JavaScript to invoke activate() function 2 times successively, tracking each spinHandle respectively. The 1st invokation’s spinHandle is cancelled after 3 seconds, the 2nd invokation’s spinHandle is cancelled after 5 seconds. Thus, the overlay should stay on for 5 seconds total.

var spinHandle1 = loadingOverlay().activate();
var spinHandle2 = loadingOverlay().activate();
setTimeout(function() {
    loadingOverlay().cancel(spinHandle1);
}, 3000);
setTimeout(function() {
    loadingOverlay().cancel(spinHandle2);
}, 5000);

Changelog:

10/11/2018

• scope fix