During the execution of a lengthy javascript function, I would like to change the cursor style to 'wait' and then revert it back to normal once the function is complete.
I initially tried using the following code:
document.body.style.cursor = 'wait';
// long scripting here
document.body.style.cursor = 'auto';
However, when hovering over elements such as <input>, the cursor changes to its default type instead of staying as 'wait'. (Verified through individual console commands).
In my research, I came across a related question that suggests creating a CSS rule:
html.wait, html.wait * { cursor: wait !important; }and applying it using this js:
document.querySelector("html").classList.add("wait");
// long scripting here
document.querySelector("html").classList.remove("wait");
Unfortunately, this method does not seem to take effect while the script is running.