I would like to place a \"please wait, loading\" spinning circle animation on my site. How should I accomplish this using jQuery?
As far as the actual loading image, check out this site for a bunch of options.
As far as displaying a DIV with this image when a request begins, you have a few choices:
A) Manually show and hide the image:
$('#form').submit(function() {
$('#wait').show();
$.post('/whatever.php', function() {
$('#wait').hide();
});
return false;
});
B) Use ajaxStart and ajaxComplete:
$('#wait').ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});
Using this the element will show/hide for any request. Could be good or bad, depending on the need.
C) Use individual callbacks for a particular request:
$('#form').submit(function() {
$.ajax({
url: '/whatever.php',
beforeSend: function() { $('#wait').show(); },
complete: function() { $('#wait').hide(); }
});
return false;
});