Cross-browser Loading Indicator Plugin - jQuery showLoading.js
File Size: | 12.2 KB |
---|---|
Views Total: | 8603 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

showLoading.js is a small, customizable, cross-browser jQuery loading indicator plugin to indicate the AJAX loading status on any container element.
How to use it:
1. Link to jQuery JavaScript library and the jQuery showLoading.js script.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="js/jquery.showLoading.js"></script>
2. Call the function showLoading()
on the target element and done. Note that the container must have an id
attribute
<div id="activity_pane"> Here is where we will load something via ajax. This container must have an id attribute </div>
function() { jQuery('#activity_pane').showLoading(); }
3. Style the loading indicator (loading spinner and loading overylay) in your CSS.
.loading-indicator { height: 80px; width: 80px; background: url( '../images/loading.gif' ); background-repeat: no-repeat; background-position: center center; } .loading-indicator-overlay { background-color: #FFFFFF; opacity: 0.6; filter: alpha(opacity = 60); }
4. Hide the loading indicator manually.
jQuery('#activity_pane').hideLoading();
5. The complex usage with jQuery load method:
jQuery('#activity_pane').showLoading(); jQuery('#activity_pane').load( '/path/to/my/url', {}, function() { jQuery('#activity_pane').hideLoading(); } );
6. Override the default loading spinner:
jQuery('#activity_pane').showLoading({ 'addClass': 'loading-indicator-bars' });
.loading-indicator-bars { background-image: url('images/loading-bars.gif'); width: 150px; }
7. All default configuration options.
jQuery('#activity_pane').showLoading({ 'addClass': '', 'hPos': 'center', 'vPos': 'center', 'indicatorZIndex' : 5001, 'overlayZIndex': 5000, 'parent': '', 'marginTop': 0, 'marginLeft': 0, 'overlayWidth': null, 'overlayHeight': null });
8. Event handlers available.
jQuery('#activity_pane').showLoading({ // before show 'beforeShow': function(){}; // after show 'afterShow': function(){}; });
This awesome jQuery plugin is developed by CrazyHong. For more Advanced Usages, please check the demo page or visit the official website.