jQuery Ajax Loading Overlay with Loading Text and Spinner Plugin
File Size: | 138 KB |
---|---|
Views Total: | 120847 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.