Customizable Overlay Loading Screen With jQuery - plainOverlay

plainOverlay is an easy yet highly customizable jQuery plugin for displaying loading overlays with custom CSS/Image based loading spinners on any DOM elements.

Basic usage:

1. Just include the following JS files on the webpage and the plainOverlay is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.plainoverlay.js"></script>

2. Create a default loading overlay covering the whole page.

$('body').plainOverlay('show');

3. Create a loading overlay with customizable settings covering a specific container.

$('#element').plainOverlay('show',{

  // duration in milliseconds
  duration:       200,

  // opacity level
  opacity:        0.6,

  // CSS z-index
  zIndex:         9000,

  // fill color of the overlay
  fillColor: '#888',

  // The jQuery-Element that is returned by specified Function is shown to the users as the progress-element on the overlay.
  // This is usually the messages or images that means "Please wait...".
  // If false is specified, nothing is shown on the overlay.
  // e.g. progress: function() { return $('<div>Loading...</div>'); }
  progress: function(){},

  // show/hide callback functions.
  show: function(){},
  hide: function(){},
  
});

4. Close the loading overlay manually.

$('body').plainOverlay('hide');

5. Events.

$('#element').on('plainoverlayshow', function(event) {
  // when shown
});

$('#element').on('plainoverlayhide', function(event) {
  // when hidden
});

---

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