Minimalist Loading Overlay Plugin With jQuery - overlay.js

overlay.js is a dead simple jQuery plugin that shows a fullscreen loading overlay to prevent user interaction during AJAX request.

How to use it:

1. Load jQuery library and the jQuery overlay.js at the end of the html document to improve load speed.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="jquery.overlay.js"></script>

2. Create an overlay element on the webpage.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="jquery.overlay.js"></script>

3. Shows a default loading overlay covering the whole webpage.

$.overlay.show();

4. Apply your own CSS styles to the loading overlay.

.overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.5);
}

5. Config the loading overlay.

var overlay = $.overlay({

    // overlay selector
    'element' : 'overlay', 

    // hide the overlay after 300ms
    'time' : 300 

});

overlay.show();

6. Hide the loading overlay.

overlay.hide();

7. Pass an additonal CSS class to the loading overlay.

var overlay = $.overlay();
overlay.show('some_class');
overlay.hide('some_class');

8. You can also add a custom loading spinner GIF to the loading spinner in the CSS.

$.overlay.show('ajax')

.overlay.ajax { z-index: 100; }

.overlay.ajax::after {
  content: '';
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;
  background-image: url('loader.gif');
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes 
rotateplane { 0% {
-webkit-transform: perspective(120px)
}
 50% {
-webkit-transform: perspective(120px) rotateY(0deg)
}
 100% {
-webkit-transform: perspective(120px) rotateX(-360deg)
}
}

@keyframes 
rotateplane { 0% {
 transform: perspective(120px) rotateX(0deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
 50% {
 transform: perspective(120px) rotateX(0deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
 100% {
 transform: perspective(120px) rotateX(-360deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(-360deg) rotateY(0deg);
}
}

---

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