Question

42

change cursor when loading page

rated 0 times [ 47] [ 5] / answers: 1 / hits: 55417 / 14 Years ago, fri, september 17, 2010, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvinjovannix

Add To Favorites

Follow

Total Points: 416

Total Questions: 94

Total Answers: 117

Location: South Korea

Member since Sun, Aug 8, 2021

3 Years ago

answered 14 Years ago susanajamiep · Accepted Answer

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.