JQuery: Show ajax loading div
How to show and hide a loading graphic during AJAX requests using jQuery's ajaxStart and ajaxStop.
If you’re using AJAX calls in your applications, then a nice feature to have is a loading graphic or animated gif. jQuery has a neat catch-all solution to this:
1
2
3
4
5
6
7
$(document).ready(function () {
$('#loading_div').hide().ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});
});
Where the loading_div contains an animated GIF and the CSS centers it on the screen.
Posted in: Javascript, JQuery / Tagged: JQuery
Note: This post was salvaged from my old blog at netawakening.azurewebsites.net via the Wayback Machine.
This post is licensed under CC BY 4.0 by the author.