jQuery Ajax Loading Overlay with Loading Text and Spinner Plugin

Loading Overlay is a simple and lightweight jQuery plugin that adds a loading overlay with loading text and loading spinner to a target element. Ideal for ajax loading overlay preventing any other action in the browser till the data gets loaded.

Basic Usage:

1. Load the jQuery javascript library and jQuery loading overlay in your page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="dist/loading-overlay.min.js"></script>

2. Create a target element where you want to apply a loading overlay with loading text and loading spinner.

<div id="target"></div>

3. The sample CSS for the loading overlay.

@font-face {
font-family: "demo";
src: url('fonts/icons.woff') format("woff"), url('fonts/icons.ttf') format("truetype");
}
 @-moz-keyframes loadingStart {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
@-webkit-keyframes loadingStart {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
@-o-keyframes loadingStart {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
@keyframes loadingStart {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
@-moz-keyframes loading {
 0% {
 -moz-transform: rotate(0deg);
 transform: rotate(0deg);
}
 50% {
 -moz-transform: rotate(180deg);
 transform: rotate(180deg);
}
 100% {
 -moz-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@-webkit-keyframes loading {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 50% {
 -webkit-transform: rotate(180deg);
 transform: rotate(180deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@-o-keyframes loading {
 0% {
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
}
 50% {
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}
 100% {
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@keyframes loading {
 0% {
 transform: rotate(0deg);
}
 50% {
 transform: rotate(180deg);
}
 100% {
 transform: rotate(360deg);
}
}
#target {
border: 2px solid black;
height: 400px;
width: 800px;
}
.loading {
position: relative;
}
.loading .loading-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-animation: loadingStart 3s 300ms linear 1 both;
-moz-animation: loadingStart 3s 300ms linear 1 both;
-o-animation: loadingStart 3s 300ms linear 1 both;
animation: loadingStart 3s 300ms linear 1 both;
background: rgba(255, 255, 255, 0.25);
text-align: center;
}
.loading .loading-text {
font-size: 0.875rem;
line-height: 1.3125rem;
text-shadow: white 0 0 1em, white 0 0 0.5em, white 0 0 0.25em;
position: relative;
display: block;
text-transform: uppercase;
font-weight: bold;
}
.loading .loading-text:after {
content: "...";
}
.loading .loading-spinner {
position: absolute;
top: 50%;
bottom: 0;
left: 0;
right: 0;
margin: -3.9375rem auto 0;
color: #1a1d1d;
text-align: center;
}
.loading .loading-icon {
font-size: 4.8125rem;
line-height: 5.25rem;
text-shadow: rgba(255, 255, 255, 0.75) 0 0 0.5em;
-webkit-animation: loading 1s steps(4) infinite;
-moz-animation: loading 1s steps(4) infinite;
-o-animation: loading 1s steps(4) infinite;
animation: loading 1s steps(4) infinite;
display: block;
vertical-align: middle;
}
.loading .loading-icon:before {
vertical-align: middle;
content: "\e000";
font-family: "demo";
}

4. Create triggers to add or remove the loading overlay.

<button class="add-loading">Add loadingOverlay</button>
<button class="remove-loading">Remove loadingOverlay</button>

5. The javascript.

<script>
jQuery(function ($) {
var target = $('#target');

$('.add-loading').click(function () {
target.loadingOverlay();
});

$('.remove-loading').click(function () {
target.loadingOverlay('remove');
});
});
</script>

6. Options

$('#target').loadingOverlay({
    loadingClass: 'loading',            // Class added to `target` while loading
    overlayClass: 'loading-overlay',    // Class added to loading overlay (to be styled in CSS)
    spinnerClass: 'loading-spinner',    // Class added to loading overlay spinner
    iconClass: 'loading-icon',          // Class added to loading overlay spinner
    textClass: 'loading-text',          // Class added to loading overlay spinner
    loadingText: 'loading'              // Text within loading overlay
});

Change log:

v1.0.2 (2014-02-20)

• update to the latest version

---

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