1

In this code, taken from Cocco's answer/jsFiddle in this question, the mouse cursor is only changed to "wait" style when the mouse is hovering over the progress div.

Why is that, and how to make it so that the cursor is the wait style all over that page, until the operation is completed?

HTML:

<button type="button" id="gogogo">Go!</button>
<div id="progress">0</div>

Javascript:

(function (W) {
    W.onload = function () {
        var D = W.document,
            a = 0,
            c = D.getElementById('progress');

        function b() {
            c.innerText = a + 1;
            a++;
            if (a < 3000) {
                requestAnimationFrame(b);
            } else {
                D.body.style.cursor = 'default';
            }
        }

        function start() {
            D.body.style.cursor = 'wait';
            b()
        }
        D.getElementById('gogogo').onclick = start;
    }
})(window)
Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111

1 Answers1

2

Well, that's because your body is only about 40px tall. Add:

body, html {
    height:100%;
    padding:0;
    margin:0;
}

to take up the height of the browser.

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272