Changing cursor to waiting in javascript/jquery

Question

How would i get my cursor to change to this loading icon when a function is called and how would i change it back to a normal cursor in javascript/jquery

Answer 1

I will describe the problem a little differently than the answers given here. A common problem is that we want to run some function, for example, to press a button, which function can take a very long time. Before starting, we want the button to get the status disabled, and this can also be seen on the screen, or we want to change the cursor or other visual features on the screen before starting the function. The problem is that if we enter a style change unnecessarily, the JavaScript will perform the function and the changes will not be reflected on the screen, until after the JavaScript completes the mentioned function, it gets someone to display something visually on the screen. For illustration, I will give an example:

function NewPageSize() {
    var e=$('#table1-pagesize");
    e.attr('disabled', true);
    console.log('page-size change event');
    $('#time').css('background-color',RGB('#ffff00'));
    let mPageSize=e.val();
    FillTable(-1, 1, mPageSize); //a function that can take a very long time 
    e.attr('disabled', false);
    $('#time').css('background-color',RGB('#ffffff'));
};

In this example, the disabled button /"e.attr('disabled', true);"/ and the color change of the "time" element to "#ffff00" are not reflected on the screen, before FillTable() .

It took me 5 days to figure out how to solve such a problem. The solution is basically very simple, but it is very poorly explains. We need to make JS think that it has nothing to do and can render the css changes to the screen. Only then do we run the function that takes longer. But how to achieve this? For this you need to receive a regular signal. WORKER is ideal for this. You install a worker that after 500 milliseconds sends like the time or whatever and displays it on the web page with some element. If it works for you, add the call to an empty procedure. In my case, it's the PROC() function.

function startWorker() {
  if(typeof(w) == "undefined") {
    w = new Worker("/js/worker.js");
  }
  w.onmessage = function(event) {
    document.getElementById("time").innerHTML = event.data;
    PROC();
  };
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}

function PROC() {return;}  //empty function

Now it gets interesting. We will rewrite the empty PROC() function so that it always does what we want. First we rewrite it to make some changes to the screen ... Alfa(). Once that's done, we'll override it to run our long-running function.... Beta(). The intermediate problem is that we need to resolve the parameters to be globally accessible. For me, the gSet() and gGet() functions are used for this. That's about all, the rest should have been clear from the code.

function NewPageSize() {
    var e=$("#table1-pagesize");
    e.attr('disabled', true);
    let mPageSize=e.val();
    console.log('page-size change event');
    $('#time').css('background-color',RGB('#ffff00'));
    gSet('Beta',
    `
    FillTable(-1, 1,`+mPageSize+`); 
    $('#time').css('background-color',RGB('#ffffff'));
    var e=$("#table1-pagesize");
    e.attr('disabled', false);
    `
    );
    PROC=Alfa;  
};

function EmptyProc() {return;}

function Alfa() {
    PROC=Beta;
}

function Beta() {
    PROC=EmptyProc;
  let s=gGet('Beta');
  let arr=s.split(';'); 
    for (var i=0; i<Len(arr); i++) {
        let t=arr[i];
        if (Len(Trim(t))>1) {
      eval(t);
        }
    }
}

Of course, there is also very sophisticated code without functions: gSet(), gGet() and "eval()", but it should be enough to understand the principle.

Answer 2

css:

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

on click:

onclick: "myFunction();"  //call your procedure

separate cursor change right before onclick by:

onmousedown="$('html').addClass('wait');"

at end of your function:

$('html').removeClass('wait');" //back to normal cursor

or better timeout the cursor restore at beginning of your function: (restores cursor 50ms after your function ended doing stuff)

setTimeout(function() { $('html').removeClass('wait') }, 50);

ALL TOGETHER:

<div style="cursor: pointer" onmousedown="$('html').addClass('wait');" onclick="sample('DE');">sample</div>

<script>
    function sample(c) {
        //timeout (this waits 50ms after function completed to restore cursor)
        setTimeout(function() { $('html').removeClass('wait') }, 50);
    
        //do your stuff including a calling opening a modal window
        //call ajax etc,
    
    }
</script>

Answer 3

Please don't use jQuery for this in 2021! There is no reason to include an entire external library just to perform this one action which can be achieved with one line:

Change cursor to spinner: document.body.style.cursor = 'wait'

Revert cursor to normal: document.body.style.cursor = 'default'

Answer 4

I found that the only way to get the cursor to effectively reset its style back to what it had prior to being changed to the wait style was to set the original style in a style sheet or in style tags at the start of the page, set the class of the object in question to the name of the style. Then after your wait period, you set the cursor style back to an empty string, NOT "default" and it reverts back to its original value as set in your style tags or style sheet. Setting it to "default" after the wait period only changes the cursor style for every element to the style called "default" which is a pointer. It doesn't change it back to its former value.

There are two conditions to make this work. First you must set the style in a style sheet or in the header of the page with style tags, NOT as an inline style and second is to reset its style by setting the wait style back to an empty string.

Answer 5

Setting the cursor for 'body' will change the cursor for the background of the page but not for controls on it. For example, buttons will still have the regular cursor when hovering over them. The following is what I am using:

To set the 'wait' cursor, create a style element and insert in the head:

var css = "* { cursor: wait; !important}";
var style = document.createElement("style");
style.type = "text/css";
style.id = "mywaitcursorstyle";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

Then to restore the cursor, delete the style element:

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}

Answer 6

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

back again
$("body").css("cursor", "default");

Pure:
document.body.style.cursor = 'progress';

back again
document.body.style.cursor = 'default';

Answer 7

A colleague suggested an approach that I find preferable to the chosen solution here. First, in CSS, add this rule:

body.waiting * {
    cursor: progress;
}

Then, to turn on the progress cursor, say:

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

and to turn off the progress cursor, say:

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

The advantage of this approach is that when you turn off the progress cursor, whatever other cursors may have been defined in your CSS will be restored. If the CSS rule is not powerful enough in precedence to overrule other CSS rules, you can add an id to the body and to the rule, or use !important.

Answer 8

The following is my preferred way, and will change the cursor everytime a page is about to change i.e. beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

Answer 9

If it saves too fast, try this:

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

Answer 10

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

This will create a loading cursor till your ajax call succeeds.

Answer 11

Here is something else interesting you can do. Define a function to call just before each ajax call. Also assign a function to call after each ajax call is complete. The first function will set the wait cursor and the second will clear it. They look like the following:

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

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

Answer 12

Override all single element

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

Answer 13

Using jquery and css :

$("#element").click(function(){ 
    $(this).addClass("wait");
});​

HTML: <div id="element">Click and wait</div>​

CSS: .wait {cursor:wait}​

Demo here

Answer 14

In your jQuery use:

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

and then back to normal again

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

Answer 15

You don't need JavaScript for this. You can change the cursor to anything you want using CSS :

selector {
    cursor: url(myimage.jpg), auto;
}

See here for browser support as there are some subtle differences depending on browser