39

While waiting for a response from a .load(), is there any way to change the cursor to the busy/wait cursor?

0

8 Answers 8

74

Try:

Updated to work with jQuery 1.8 +

$(document).ajaxStart(function() {
    $(document.body).css({'cursor' : 'wait'});
}).ajaxStop(function() {
    $(document.body).css({'cursor' : 'default'});
});

Cursor changes on any ajax start and end. That includes .load().

Try out the different cursor styles here:

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

4
  • I thought about adding this to my apps last week. Simple. Clean. Apr 26, 2012 at 3:53
  • I think this might be the Mona Lisa of the coding world! Certainly feels like it after the hideous solutions I've been trying! Nice work bro!
    – Jimmy
    Aug 20, 2013 at 9:28
  • Although it is an old post, just wanted to point out that as of jQuery 1.8, the .ajaxStop() method should only be attached to document. Thus, @RitchieD 's answer below is the right answer for recent jQuery versions. Cheers.
    – Estarossa
    May 8, 2015 at 9:40
  • At last something that works! Could not vote more than once.
    – Tarik
    Mar 31, 2021 at 10:39
11

I had to tweak the eloquent answer above to work with jQuery > 1.8.

$(document).ajaxStart(function () {
    $(document.body).css({ 'cursor': 'wait' })
});
$(document).ajaxComplete(function () {
    $(document.body).css({ 'cursor': 'default' })
});
1
  • You could still replace those $(document.body) with just $('body') to make it shorter. Or $(this.body) if you don't want to use a string ^_^
    – Sygmoral
    Sep 13, 2015 at 1:13
8

I don't like the solution that simply add the css property to the body tag: it's not gonna work if you already have a cursor assigned to your element. Like me, I use cursor: pointer; on all my anchor tag. So, I came up with this solution:

Create a CSS class to avoid overwriting the current cursor (to be able to go back to normal afterwards)

.cursor-wait {
    cursor: wait !important;
}

Create the functions to add and remove the cursor

cursor_wait = function()
{
    // switch to cursor wait for the current element over
    var elements = $(':hover');
    if (elements.length)
    {
        // get the last element which is the one on top
        elements.last().addClass('cursor-wait');
    }
    // use .off() and a unique event name to avoid duplicates
    $('html').
    off('mouseover.cursorwait').
    on('mouseover.cursorwait', function(e)
    {
        // switch to cursor wait for all elements you'll be over
        $(e.target).addClass('cursor-wait');
    });
}

remove_cursor_wait = function()
{
    $('html').off('mouseover.cursorwait'); // remove event handler
    $('.cursor-wait').removeClass('cursor-wait'); // get back to default
}

Then create your ajax function (I don't use events like ajaxStart or ajaxStop because I don't want to use cursor wait with all my ajax call)

get_results = function(){

    cursor_wait();

    $.ajax({
        type: "POST",
        url: "myfile.php",

        data: { var : something },

        success: function(data)
        {
            remove_cursor_wait();
        }
    });
}

I'm not very familiar with jQuery load(), but I guess it will be something like this:

$('button').click(function()
{
    cursor_wait();

    $('#div1').load('test.txt', function(responseTxt, statusTxt, xhr)
    {
        if (statusTxt == "success")
        { remove_cursor_wait(); }
    });
});

DEMO

Hope it helps!

1
  • Thanks, this is a good solution. There is a tiny flicker when hovering over an element such as input. Any idea to fix? Jul 23, 2015 at 9:01
5

You can use this:

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

before you start loading and once complete change the cursor to auto

2

I hope this helps

$("body").css('cursor','wait');
   //or
   $("body").css('cursor','progress');

greetings

1

I tried the various methods I found here and other places and decided there are too many bugs in various browsers (or even setups, like RDP/VNC/Terminal users) with changing the mouse cursor. So instead I ended up with this:

Inside my app init code that fires after document ready:

    // Make working follow the mouse
    var working = $('#Working');
    $(document).mousemove(function(e) {
        working.css({
            left: e.pageX + 20,
            top: e.pageY
        });
    });

    // Show working while AJAX requests are in progress
    $(document).ajaxStart(function() {
        working.show();
    }).ajaxStop(function() {
        working.hide();
    });

And towards the end of my HTML, just inside the body I have:

<div id="Working" style="position: absolute; z-index: 5000;"><img src="Images/loading.gif" alt="Working..." /></div>

It works a lot like the "app loading" mouse cursor in Windows, where you still get your normal cursor, but you can also tell that something is happening. This is ideal in my case because I want the user to feel they can still do other stuff while waiting, since my app handles that pretty well so far (early stages of testing).

My loading.gif file is just a typical spinning wheel, about 16x16 pixels, so not too annoying, but obvious.

1

Try:

$(document).ajaxStart(function () {
    $('body').css('cursor', 'wait');
}).ajaxStop(function () {
    $('body').css('cursor', 'auto');
});

As of jQuery 1.8, the .ajaxStop() and the .ajaxComplete() methods should only be attached to document.

Interchanging .ajaxStop() with .ajaxComplete() both gave me satisfactory results.

0

Change the body's CSS to cursor: progress.

To do this, just make a "waiting" class with this CSS, and then add/remove the class from the body.

CSS:

.waiting {
    cursor: progress;
}

Then in your JS:

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

You can remove it later with .removeClass.

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.