django-ajax-loading-overy uses Javascript to add/remove a loading overlay to a target element during Ajax calls. It can be called on any element that should receive the loading overlay, and accepts options for class selectors and loading overlay text.
- jQuery library (http://jquery.com/)
In your Django project settings, add "ajax_loading_overlay" to your INSTALLED_APPS.
Linking the JS:
<script src="{{ STATIC_URL }}ajax_loading_overlay/jquery.ajax-loading-overlay.js"></script>
Calling the plugin:
$('#target').loadingOverlay();
Removing the loading overlay (usually upon success of the Ajax call):
$('#target').loadingOverlay('remove');
Options can be passed to override the default loading class ('loading'), overlay class ('overlay'), loading text('loading...'), and/or function to return loading text padding-top:
$('#target').loadingOverlay({
loadingClass: 'myLoadingClass',
overlayClass: 'myOverlayClass',
loadingText: 'Loading. Please Wait.',
paddingTop: function (target) {
return ((target.outerHeight() - parseInt(target.css('line-height'), 10)) / 2).toString() + 'px';
}
});
If loadingClass or overlayClass options are passed when initializing the loading overlay, the same options must be passed when removing that overlay:
$('#target').loadingOverlay('remove', {
loadingClass: 'myLoadingClass',
overlayClass: 'myOverlayClass'
});