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 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/javascript">     // 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> 

Note that the page is loaded sequentially so the closer to the top of your second page the cursor='wait' line is, the less delay there will be in showing the cursor on the new page.

Answer 2

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 the 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";   }; }