title: JQuery - show progress mouse cursor on entire page (also JQuery UI elements) and reset correctly afterwards
body: <p>(My users mainly use Chrome and Firefox.)</p>
  
  <p>When a long running action begins, I want to indicate that something is going in by setting the mouse cursor to progress. I want to display this progress on all visible elements - the body as well as buttons, draggables, resizables and whatever else UI elements are available.
  Of course I also want to reset the mouse cursor for all elements afterwards. So I have to know which is the default style of each element (cursor-pointer, draggable-move, resizable-...).</p>
  
  <p>My approaches:</p>
  
  <p>If I just set the progress cursor for "body", the cursor for buttons and draggables still remains the old one, which can confuse the user:</p>
  
  <pre><code>$("body").css("cursor", "progress");
  
  // do long running stuff
  
  $("body").css("cursor", "default");
  </code></pre>
  
  <p>If I set the cursor for all elements, I have another problem, since I don't know which elements had which cursor. So buttons, draggables, resizables and so on will loose their cursor afterwards:</p>
  
  <pre><code>$("*").css("cursor", "progress");
  
  // do long running stuff
  
  $("*").css("cursor", "default");
  </code></pre>
  
  <p>The only working approach I found is:</p>
  
  <pre><code>$("body").css("cursor", "progress");
  $("button").css("cursor", "progress");
  $(".ui-dialog-titlebar").css("cursor", "progress");
  $(".ui-resizable-n").css("cursor", "progress");
  $(".ui-resizable-s").css("cursor", "progress");
  $(".ui-resizable-w").css("cursor", "progress");
  $(".ui-resizable-e").css("cursor", "progress");
  
  // do long running stuff
  
  $("body").css("cursor", "default");
  $("button").css("cursor", "pointer");
  $(".ui-dialog-titlebar").css("cursor", "move");
  $(".ui-resizable-n").css("cursor", "n-resize");
  $(".ui-resizable-s").css("cursor", "s-resize");
  $(".ui-resizable-w").css("cursor", "w-resize");
  $(".ui-resizable-e").css("cursor", "e-resize");
  </code></pre>
  
  <p>Is there a more elegant / generic approach to do that? Also I'm not sure if I forget to reset a particular JQuery style to its default. I would like to solve this problem for all my pages without thinking about it again.</p>
  
  <hr>
  
  <p>With "long running action" I mean $.ajax / $.post calls., like this:</p>
  
  <pre><code>// my new magic mouse cursor method which should do what I want
  showProgressCursor(true);
  
  $.post(window.location.href, {action: 'reprovide'}, function(data) {
      // should reset all cursor CSS to their correct defaults
      showProgressCursor(false);
  });
  </code></pre>