Mouse cursor set using jQuery/CSS not changing until mouse moved

I think I solved it! Just call setTimeout() after you change the cursor. For example

$('body').addClass('in-progress-cursor');
setTimeout(null, 0); //in typescript we need to provide arguments

This is well-known trick (Why is setTimeout(fn, 0) sometimes useful?) but I didn't expect this would work in this case.

This is my favorite method of telling user unobtrusively that there is something going on. For example I use it to indicate that http requests are in progress. It is such a relief that the solution is found. Why I feel stupid again... Actually I see the timeout in John R's answer now. But it is not evident enough.

Some elements have default cursor styles. So wile changing the cursor style we need to change that too.

$(document).ready(function() {
  function setWaitCursor(elem) {
    elem.css('cursor', 'wait');
    $('body').css('cursor', 'wait');
  }
  function setDefaultCursor(elem) {
    elem.css('cursor', '');
    $('body').css('cursor', '');
  }
  $('#testLink').on('click', function() {
    var x = $(this)
    setWaitCursor(x);
    setTimeout(function() {
      setDefaultCursor(x);
    }, 5000);
    return false;
  });
});

Demo fiddle

Just change the body to *. It will be applicable to all the elements.

Fiidle Demo

Code snippets:

$(document).ready(function() {

  function setWaitCursor() {
    $('*').css('cursor', 'wait');
  }

  function setDefaultCursor() {
    $('*').css('cursor', '');
  }

  $('#testLink').on('click', function() {
    setWaitCursor();
    setTimeout(function() {
      setDefaultCursor();
    }, 2000);
    return false;
  });

});

body {
  min-width: 500px;
  min-height: 500px;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="mouseContainer">
  <a href="#" id="testLink">Test Link</a>
</div>

Although this is not the answer to this specific problem, this behavior can happen:

• On Chrome
• With DevTools open (which is very likely, in order to debug this issue)

The solution is simply to close the Chrome DevTools.