change cursor when loading page

Question

So what I trying to do is to change the cursor to wait when some page is loading.

I thought this was possible with css, I trying to achieve this when someone click on some link, so what I have is this:

#something a:hover { cursor: hand; }
#something a:active { cursor: wait; }

But this doesn't work, it's a hand when hover links, and when for a second is wait, but I want this wait to continue until the new page appear.

So my question is: Is this wrong? To achieve what I want?
Or do I have to use javascript?

Answer 1

The meaning of the cursor property in relation to CSS selector is that when the mouse is over an element matching the selector then use the cursor. So to change the cursor for the overall document you need to do something like:

html {
    cursor: wait;
}

Obviously, this will change the cursor forever (or until the user closes the page, whichever comes first). To do this dynamically you need to use javascript:

document.body.style.cursor = 'wait';

Note that cursor:hand is only supported by IE and only needed for IE 5. The correct cursor name is pointer. Of course, if you need to support IE 5 you need to use cursor:hand. Instead of using browser sniffing you can use class name to change cursor:

CSS:

.handCursor {
    cursor: pointer;
    cursor: hand;
}

JS:

document.body.className = 'handCursor';

Answer 2

The way to do this is something like this:

On the first page (to show as soon as the link is clicked):

<a href="http://www.example.com/Page2.html" onclick="document.body.style.cursor='wait'; return true;">

On the second page (to show until the new page finishes loading):

<script type="text/javsacript">
    //Set the cursor ASAP to "Wait"
    document.body.style.cursor='wait';

    //When the window has finished loading, set it back to default...
    window.onload=function(){document.body.style.cursor='default';}
</script>

Answer 3

As 'answered' says you can use CSS to attach the cursor to the html element, which should cover the whole page.

But you'll need to add a listener to every single anchor in the page with an onclick, which calls a function that sets the cursor on the HTML or body element. When the page reloads the cursor will go back to default again as trhe javascript would've refreshed

var anchors = document.getElementsByTagName("a");
for(var i=0,len=anchors.length;i<len;i++)
{

anchors[i].onclick = function()
{

document.body.style.cursor = "wait";

};

}