Simple Flexible Loading Overlay Plugin With jQuery - loadingoverlay.js

Simple Flexible Loading Overlay Plugin With jQuery - loadingoverlay.js
File Size: 40 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

loadingoverlay.js is a simple, flexible jQuery plugin which shows a highly cutomizable loading overlay with custom spinners while loading some data within a specific container. You can find advanced examples in the official documentation page.

Basic usage:

1. Include both jQuery library and the jQuery loadingoverlay.js script on the webpage.

<script src="//"></script>
<script src="loadingoverlay.min.js"></script>

2. The JavaScript to show a fullscreen loading overlay cover the whole page.


3. The JavaScript to show a fullscreen loading overlay on a specified element.


4. Hide the loading overlay.


5. All default customization options.

$(".container").LoadingOverlay("show", {

  // Background
  "backgroundClass"   : "",
  "backgroundCss"     : {
      "background-color"   : "rgba(255, 255, 255, 0.8)"
  // Image
  "image"             : "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjxlbGxpcHNlIHJ4PSI4MCIgcnk9IjgwIiBjeD0iNTAwIiBjeT0iOTAiLz48ZWxsaXBzZSByeD0iODAiIHJ5PSI4MCIgY3g9IjUwMCIgY3k9IjkxMCIvPjxlbGxpcHNlIHJ4PSI4MCIgcnk9IjgwIiBjeD0iOTAiIGN5PSI1MDAiLz48ZWxsaXBzZSByeD0iODAiIHJ5PSI4MCIgY3g9IjkxMCIgY3k9IjUwMCIvPjxlbGxpcHNlIHJ4PSI4MCIgcnk9IjgwIiBjeD0iMjEyIiBjeT0iMjEyIi8+PGVsbGlwc2Ugcng9IjgwIiByeT0iODAiIGN4PSI3ODgiIGN5PSIyMTIiLz48ZWxsaXBzZSByeD0iODAiIHJ5PSI4MCIgY3g9IjIxMiIgY3k9Ijc4OCIvPjxlbGxpcHNlIHJ4PSI4MCIgcnk9IjgwIiBjeD0iNzg4IiBjeT0iNzg4Ii8+PC9zdmc+",
  "imageClass"        : "",
  "imageCss"          : {
      "animation-name"            : "loadingoverlay_animation__rotate_right",
      "animation-duration"        : "2000ms",
      "animation-timing-function" : "linear",
      "animation-iteration-count" : "infinite",
      "fill"                      : "#202020"

  // additonal CSS classes
  custom          : "",

  // fade out the loading overlay
  fade            : true,

  // use Font Awesome 4 icons for the loading spinner
  fontawesome     : "",

  // postion of the spinner
  imagePosition   : "center center",

  // min/max size of the spinner
  maxSize         : "100px",
  minSize         : "20px",

  // Specifies an interval in milliseconds to resize the Loading Overlay accoring to its container.
  // Use this when the DOM element is supposed to change size while the Loading Overlay is shown.
  resizeInterval  : 0,

  // size of the spinner
  size            : "50%",

  // z-index property
  zIndex          : undefined


Change log:

v2.0.0dev (2018-02-17)

  • CSS3 animations, SVG image, improved background

v1.6.0 (2018-02-11)

  • AMD and CommonJS support
  • Typings for TypeScript
  • Extra Progress: it is possible to disable shown text

v1.5.5 (2017-12-26)

  • Add AMD, CommonJS and Plain Browser Support

v1.5.4 (2017-09-29)

  • Option zIndex defaults to the highests value allowed (2147483647) to prevent other elements to be displayed over LoadingOverlay

v1.5.3 (2017-01-28)

  • CSS positioning problem with Extra Progress when used with Font Awesome
  • Option zIndex defaults to 9999

v1.4.1 (2016-08-05)

  • Fixed a bug with positioning when LoadingOverlay is attached to an element (element overlay mode).
  • LoadingOverlay is now always attached to the body, even if it is an element overlay. This means you can safely remove all the container element’s contents while the LoadingOverlay is being shown. At the same time it shouldn’t break anything in your existing code, unless you were doing something really tricky with it.
  • The resizeInterval option is now active and set to 50 milliseconds by default. This makes more sense as a default value since one would activate it more often than not.

About Author:

Author: Gaspare Sganga

Official Website:

This awesome jQuery plugin is developed by gasparesganga. For more Advanced Usages, please check the demo page or visit the official website.