1

I am developing a web form that pulls and updates customer information and it has multiple ajax requests that are somewhat slow due (2-4 seconds). I added a 'waiting' cursor whenever the page is waiting for results. However, a lot of the time the page is waiting for the request, users either leave their cursor on a button or a table (via tabulator) so the cursor stays as the hand/click cursor and the loading wheel is not visible. If the user moves the mouse off the button/table it changes to the loading wheel. I am already using jQuery to do the ajax calls so I am using this piece of code:

$(document.body).css({'cursor' : 'wait'});

Is there a way that I can force the icon to the loading wheel, no matter what state it is in?

Eric Leslie
  • 51
  • 1
  • 1
  • 6
  • Does this answer your question? [Changing cursor to waiting in javascript/jquery](https://stackoverflow.com/questions/9681080/changing-cursor-to-waiting-in-javascript-jquery) – MattHamer5 Nov 20 '19 at 16:47
  • Could you also use the "pointer-events" property (pointer-events: none;) to disable any default events, while the request is happening? – 1amShaw Nov 20 '19 at 16:54

2 Answers2

0

You could use !important to override the css set on buttons, links, input and body.

$("body,a,button,input").css("cssText", "cursor:wait !important;");

Note the usage of cssText above.

You could also specify * as your selector, but that would be pretty reckless.

Pale2Hall
  • 69
  • 4
0

Instead of adding cursor: wait; to multiple elements on your page, I suggest you add a class to your body.

$(document.body).addClass('loading');

In your CSS, you can define your loading-cursor to show everywhere.

.loading * {
  cursor: wait !important;
}
Bruce
  • 109
  • 3