jQuery showLoading plugin
November 30th, 2010
by Jim Keller | Principal
| Download |
| Download as .zip |
| Demo |
| View Demo |
This plugin is designed to show a loading graphic over a specific area of the screen (e.g. a specific <div>) while an ajax request is running.
Works with jQuery 1.3.2 and jQuery 1.4.2
Tested in IE6, IE7, Firefox, Chrome, Safari
Options
| addClass |
|
Class name to add to the loading indicator and the overly. Note that while the loading indicator will obtain the class name exactly as specified, the overlay will have ‘-overlay’ appended to it. For instance, if your addClass value was ’search’, the indicator would have the ’search’ class name applied, the overlay would have ’search-overlay’ added as a class |
| hPos (default: center) |
| The horizontal position of the indicator. Can accept the values: ‘left’, ‘right’, ‘center’ |
| vPos (default: center) |
| The vertical position of the indicator. Can accept the values: ‘top’, ‘bottom’, ‘center’ |
| marginLeft |
| Left margin for the indicator – useful for inching it one way or another. Should be a numeric value. |
| marginTop |
| Top margin for the indicator – useful for inching it one way or another. Should be a numeric value. |
| beforeShow |
| Function to be called just before the indicator is shown. The callback will be passed an array with the following keys:
‘overlay’ – the overlay element ‘indicator’ – the loading indicator element ‘element’ – the element we are placing the loading indicator on top of |
| afterShow |
| Function to be called after the indicator has been shown. Passes the same array to the callback as beforeShow (see above) |
Examples
jQuery(document).ready(
function() {
//
// When a user clicks the 'loading-default' link,
// call showLoading on the activity pane
// with default options
//
jQuery('a.loading-default').click(
function() {
jQuery('#activity_pane').showLoading();
}
);
//
// When a user clicks the 'loading-ajax' link,
// call showLoading before performing the 'load'
//
jQuery('a.load-ajax').click(
function() {
jQuery('#activity_pane').showLoading();
jQuery('#activity_pane').load( '/some/url',
function() {
// callback fires after ajax load completes
jQuery('#activity_pane').hideLoading();
}
);
}
);
//
// When a user clicks the 'loading-bars' link,
// call showLoading with addClass specified
//
jQuery('a.loading-bars').click(
function() {
jQuery('#activity_pane').showLoading(
{
'addClass': 'loading-indicator-bars'
}
);
}
);
//
// When a user clicks the 'loading-hide' link,
// call hideLoading on the activity pane
//
jQuery('a.loading-hide').click(
function() {
jQuery('#activity_pane').hideLoading();
}
);
}
);
ajax, context, jquery, loading
Past Comments
Great plugin - Thankyou.
Currently the ajax spinner is out of view on long scrolling pages. By using fixed positioning for the loadingDiv, the ajax spinner will always be in the center of the page (even for long scrolling pages).
My suggestion would be to change this in your plugin:
jQuery(loadingDiv).css('position', 'absolute');
to
jQuery(loadingDiv).css('position', 'fixed');
and include the following in your .loading-indicator css:
left:40% !important;
top:40% !important;
Thanks,
Adam.