jquery wait cursor while loading html in div

Question

I want to show to the user a state that the result is loading. How can I change cursor or gif while loading result in div with $MyDiv.load("page.php") ?

Answer 1

$("body").css("cursor", "progress");

Just remember to return it afterwards:

$MyDiv.load("page.php", function () {
    // this is the callback function, called after the load is finished.
    $("body").css("cursor", "auto");
}); 

Answer 2

$("*").css("cursor", "progress") will work no matter where on the page you are currently pointing. This way you do not have to move the cursor to see it activated.

Answer 3

I think the best is to set up in css file

body.wait *, body.wait {
cursor:wait !important;
}

and add/remove class wait in body

this method overrides all cursors in inputs, links etc.

Answer 4

1. Initially style the loading image non-visible.
2. Change the style to visible when you begin loading.
3. Change the style to non-visible when loading finished using a callback argument to load().

Example:

 $("#loadImage").show();
 $("#MyDiv").load("page.php", {limit: 25}, function(){
   $("#loadImage").hide();
 });

Answer 5

I really think that it's a better solution to just use a class in the body element

  $('body').addClass('cursorProgress');

And when you want to keep it as it was before just:

  $('body').removeClass('cursorProgress');

and in you css file put something like that:

body.cursorProgress {
  cursor: progress;
}

So with this solution you are not overriding the defaults or changes you make on cursor styles, and the second advantage is that you have the possibility of adding the important in your css.

body.cursorProgress {
  cursor: progress !important;
}