Minimalist Loading Overlay Plugin With jQuery - overlay.js
File Size: | 18.7 KB |
---|---|
Views Total: | 3218 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.