Minimal jQuery Loading Overlay & Spinner Plugin - Easy Overlay

Easy Overlay is a ultra-simple jQuery plugin allows you to create a loading overlay with a loading spinner on any element. Great for indicating the ajax loading progress inside a container.

How to use it:

1. Include the jQuery library and the jQuery easy overlay's script in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.easy-overlay.js"></script>

2. Include the required Font Awesome 4 for the loading spinner.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

3. Call the plugin to create a loading overlay covering the given container with CSS class of 'demo'.

$(".demo").easyOverlay("start");

4. The method to close the loading overlay.

$(".demo").easyOverlay("stop");

5. Customize the loading overlay.

$(".demo").easyOverlay("start",{

  //The default z-index of the overlay is 99999
  zindex: 60000, 

  // true: Show the fontawesome loading spinner
  // false: No spinner will be shown
  // { url: 'image-web-url', width: 'image-width', height: 'image-height' }: A custom spinner, with an image from a url; sizes can be specified with units or percentages
  spin: true,   

  //Time in miliseconds for the fadeIn or fadeOut effects of the overlay.
  delay: 400     
  
});

Change log:

2016-11-05

• Custom image for spinner, with custom dimensions

2016-07-17

• JS update

---

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