Awesome Way To Add Loading Screen using JQuery

In most cases, we might find ourselves in the need of loading screen when dealing with real time data. There are many ways on how to create one. In this tutorial, we will teach on how to add loading screen on your website using Gaspare Sganga's JQuery Loading Overlay library.



Before we start, we will need this libraries below:

• https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
• https://cdn.jsdelivr.net/jquery.loadingoverlay/latest/loadingoverlay.min.js
• https://cdn.jsdelivr.net/jquery.loadingoverlay/latest/loadingoverlay_progress.min.js

We will need to embed JQuery first since the library we will use is dependent on it. 

Here are the features of the JQuery Loading Overlay

• Shows a loading overlay on the whole page or over single DOM elements
• Can auto resize according to its container (very useful if used over a DOM element being filled meanwhile)
• Compatible with Font Awesome
• Can show a custom element to provide feedback to the user
• Completely configurable
• No external CSS, small footprint

Methods

There are three different methods, one to attach a LoadingOverlay to the body and thus covering the whole page, another to attach it to a single DOM element or a set of DOM elements and the last one to set the default parameters.

$.LoadingOverlay(action [,options])

Shows the LoadingOverlay with a fixed position, covering the whole page. Optionally pass some options to it.
This method doesn’t return anything.

$(selector).LoadingOverlay(action [,options])

Attach the LoadingOverlay to a single DOM element or a set of DOM elements. Optionally pass some options to it.
This method returns a jQuery object or a set of jQuery objects (depending on the selector used) and is chainable.

$.LoadingOverlaySetup(options)

Set default options for all future calls to $.LoadingOverlay() and $(selector).LoadingOverlay().

Basic Implementations

Showing the loading screen:

 

 //showing Loading Overlay
 $.LoadingOverlay("show");

 //showing Loading Overlay to specific element
 $("#element").LoadingOverlay("show");

 

 //Using Font Awesome
 $.LoadingOverlay("show", {
   image       : "",
   fontawesome : "fa fa-spinner fa-spin"
 });

Hiding the loading screen:

 
 //Hiding Loading Overlay
  $.LoadingOverlay("hide");

  //Hiding Loading Overlay
  // Here we might call the "hide" action 2 times, or simply set the "force" parameter to true:
  $("#element").LoadingOverlay("hide", true);

Using Font Awesome Icon

 //Using Font Awesome
 $.LoadingOverlay("show", {
     image       : "",
     fontawesome : "fa fa-spinner fa-spin"
 });

For more instructions on the implementation and usage of the library,  visit the link below
https://gasparesganga.com/labs/jquery-loading-overlay/