Configurable Loading Spinner With Pure JS – loadingOverlay.js

Category: Javascript , Loading | October 11, 2018
Author: katmore
Views Total: 2,276
Official Page: Go to website
Last Update: October 11, 2018
License: GPL v3

Preview:

Configurable Loading Spinner With Pure JS – loadingOverlay.js

Description:

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

You Might Be Interested In:


Leave a Reply