jquery wait cursor while loading html in div

Question

I want to show to the user a state that the result is loading. How can I change cursor or gif while loading result in div with $MyDiv.load("page.php") ?

score 62 · Answer 1 · answered Feb 18 '09 at 14:58

62

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

Just remember to return it afterwards:

$MyDiv.load("page.php", function () {
    // this is the callback function, called after the load is finished.
    $("body").css("cursor", "auto");
});

answered Feb 18 '09 at 14:58

Magnar

28,550
8
60
65

4

this did not work on my site but $("*").css("cursor", "progress") did – Bryan Sep 30 '11 at 03:11
9

hmm... this approach has a bad side effect... setting $('*').css('cursor', 'auto') wipes away any special cursors you may have set up on items on the page. no good! – ekkis Nov 15 '11 at 00:30
1

@ekkis Do you know an alternative? – k0pernikus Nov 02 '12 at 15:22
@ekkis Nevermind, I solved it by defining a css class `loading` where I set the cursor. And instead of $fnord.css(...) I use $fnord.toggleClass('loading') – k0pernikus Nov 02 '12 at 15:26
This works for me unless I hover over a button. Is there a way with CSS to set !important? – Apr 24 '13 at 01:35
when going back to normal i used `$("body").css("cursor", "");` – Valamas Nov 11 '14 at 21:39

score 12 · Answer 2 · edited Jan 03 '12 at 19:24

12

$("*").css("cursor", "progress") will work no matter where on the page you are currently pointing. This way you do not have to move the cursor to see it activated.

edited Jan 03 '12 at 19:24

Andreas Köberle

106,652
57
273
297

answered Jun 04 '10 at 18:08

mountain

137
1
2

1

nice but does not work in Chrome (http://code.google.com/p/chromium/issues/detail?id=26723) – Tom Maeckelberghe Mar 04 '11 at 13:11
4

yikes! that approach is flawed. it wipes out cursor assignments to everything on the page. – commonpike Feb 18 '12 at 23:12

score 10 · Answer 3 · edited Nov 23 '11 at 11:31

10

I think the best is to set up in css file

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

and add/remove class wait in body

this method overrides all cursors in inputs, links etc.

edited Nov 23 '11 at 11:31

elCamion

3
2

answered Oct 03 '10 at 22:42

Marmot

109
1
2

I like the approach but it didn't work on IE 9. mountain's approach of `$('*').css('cursor', ...)` did though – ekkis Nov 15 '11 at 00:27
yikes! that approach is flawed. it wipes out cursor assignments to everything on the page – ekkis Nov 15 '11 at 00:30
This's actually the best cross-browser solution - tested. after removing wait class, CSS will cascade back to what the cursor was set without defaulting it like other solutions. Thx Marmot. @ekkis you should test it again. it works in IE9. – Sergej Popov Jul 20 '12 at 09:40

score 7 · Accepted Answer · answered Feb 18 '09 at 14:59

7

Initially style the loading image non-visible.
Change the style to visible when you begin loading.
Change the style to non-visible when loading finished using a callback argument to load().

Example:

 $("#loadImage").show();
 $("#MyDiv").load("page.php", {limit: 25}, function(){
   $("#loadImage").hide();
 });

answered Feb 18 '09 at 14:59

Craig Stuntz

125,891
12
252
273

10

To actually create the loading gif, check out http://www.ajaxload.info/ where you can customize one and save it. – Darwyn Jul 26 '09 at 23:30

score 4 · Answer 5 · answered Feb 17 '15 at 13:29

I really think that it's a better solution to just use a class in the body element

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

And when you want to keep it as it was before just:

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

and in you css file put something like that:

body.cursorProgress {
  cursor: progress;
}

So with this solution you are not overriding the defaults or changes you make on cursor styles, and the second advantage is that you have the possibility of adding the important in your css.

body.cursorProgress {
  cursor: progress !important;
}

score 0 · Answer 6 · answered Aug 03 '12 at 11:42

A cleaner JQuery approach, although not necessarily efficient is to add and remove a busy class to all objects.

Note that, not all browsers (e.g. Firefox) assume a height of 100% for the outermost viewable object, so the busy cursor will only get displayed on the part of the screen

<head runat="server">
    <title></title>
    <style type="text/css">
        .busy
        {
            cursor: wait !important;
        }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[

        $(function () {

            $("#btnToggleWait").click(function (e) {
                if ($(e.target).hasClass("busy")) {
                    $("*").removeClass("busy");
                }
                else {
                    $("*").addClass("busy");
                }

                e.preventDefault();
                e.stopPropagation();
                return false;
            });
        });

        //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <button id="btnToggleWait">
            Toggle Wait</button>
    </div>
    </form>
</body>

score 0 · Answer 7 · edited May 23 '17 at 11:52

0

Have a look at my solution, it covers all elements, not only the body tag: https://stackoverflow.com/a/26183551/1895428

edited May 23 '17 at 11:52

Community

1
1

answered Jun 23 '16 at 17:41

pmrotule

9,065
4
50
58

score 0 · Answer 8 · answered Jul 08 '11 at 03:31

For example, if you want to show larger image on hovering on a thumbnail

//Hovered image
    $("a.preview").hover(function(e) {
            var aprev = this;
            //Show progress cursor while loading image
            $(aprev).css("cursor", "progress");
    //#imgpreview is the <div> to be loaded on hover
    $("#imgpreview").load(function() {           
                $(aprev).css("cursor", "default");
            });
    }

jquery wait cursor while loading html in div

8 Answers8

Linked