Wait cursor throughout html web page transition

Question

I have a standard ASP.Net/MVC application, and have what I consider a very important and super-basic (I think) question. A question seeming to have no posted answer (?)

Super-common scenario:
In an HTML page, the user presses some sort of page navigation button. What typically now happens, is the following:

1. The old page is kept in browser for a 1-2 seconds
2. The entire browser goes white for 1-2 seconds.
3. The browser spends X seconds to load new page.

Now, what I consider to a be a super-basic requirement, is that the user gets a wait or progress cursor throughout all the steps 1, 2 and 3. However, I am not able to achieve this, even after tried several hours.

1: When the user navigates (e.g. presses a link or button), it is possible to set up CSS like

$('*').css('cursor', 'wait !important')

This helps a bit, as a wait cursor is shown approximately through phase (1).

2+3: However, my best shot at setting a wait cursor through phase (2) and (3), is to set a wait cursor in the Document Ready event for the new page. But this only brings up a wait cursor for a very short time at end of phase (3). This really only results in some non-useful short "wait cursor flickering", which really only add confusement to end user.

The ideal situation is perhaps/probably (at least conceptually) the set a wait cursor on the browser application itself at start of phase (1), then restore browser cursor to default at end of phase (3) (e.g. in the Document Ready event).

Please give input! :-) Thousands of people before me must have encountered this(!?)

PS. (Yes, I know that the browser gives a wait symbol in the currently active tab through the page transition, but this wait symbol is far too small / off the focus of the eye of the user. The user needs a clear/visible wait symbol at the exact same place where he clicked the navigation button, i.e. where (s)he has eye focus. Otherwise, many users will think that the web page hangs).

Answer 1

Personally, I like setting the wait cursor $(window).on('beforeunload', function() {...

So something like this works best for me.

$(window).on('beforeunload', function() {
    $('*').css('cursor', 'wait !important')
});