javascript ONLY loader before aspx...like gmail.com login loader

I have a Home.html that has a login form that POSTS to login.aspx the login.aspx takes a hell lot of time to load...

so i want to have a javascript based function where the instant i click Login Button, a loader must be shown ...while in the background the POST happens and then aspx page must get loaded and then the modal must redirect to the aspx page.

similar to gmail.com login loader..... but only using javascript. (i am also using a minified jquery js ) (NO aspx pages in between)

Please note that i cannot use any asp based loader!

I have tried using :

http://blogs.msdn.com/naitik/archive/2008/07/31/show-loading-message-while-web-page-is-processing.aspx

(it does not work fast. it first redirects to the P开发者_JAVA技巧OSTed page )

Thanks in advance..

If you just want to show a "Please wait...", attach yourself to the forms "onsubmit" event. Then show the "please wait" message (make a DIV visible). When you are done, the form will be submitted and wait for login.aspx.

If you want to have a progress bar, you have two ways of doing it: * Either post to a hidden iframe which will load login.aspx. * Or use an XmlHttpRequest to load login.aspx.

In both cases, login.aspx has to spit out messages (pieces of JScript or DIVs you interpret on the client) which update your progress bar.

You will find plenty of examples in Google. Try "jscript progress bar aspx" for instance.

René

Check out the following link, as it is the needed code, styling and layout for a "Loader".

I have used the code and it works 100%

You need a Div on your page:

 <div class="modal"></div>

a bit of CSS styling for the div:

/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
speak for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
 }

 /* When the body has the loading class, we turn
    the scrollbar off with overflow:hidden */
 body.loading {
     overflow: hidden;   
 }

 /* Anytime the body has the loading class, our
    modal element will be visible */
 body.loading .modal {
      display: block;
 }

And then lastly a bit of javascript to start and stop(hide and display) the loader:

START:

 $(this).addClass("loading");

STOP:

 $(this).removeClass("loading");

Source: http://jsfiddle.net/jonathansampson/VpDUG/170/