javascript - Display some html until final page is loaded -

i using rails make search request.

the search form's action path "/results/foo" .. hits controller validation of input , redirects "results/foobar" if search-text clean.

<h1 class="center"><progress style="font-size: 160%;">loading...</progress></h1> 

i'd show above html.. , above html (either in view or via jquery) until "results/foobar" has loaded.

is there way show such progress bar animation (html) until final page has completed loading?

more details (the search bar page has code this):

<form class="form-search" action="/s_results/iscan" method="post">         <div class="input-append">             <input name="searchtext" type="text" class="span4 search-query" placeholder="type number here...">             <button type="submit" class="btn">                 <i class="icon-search"></i>                 search             </button>         </div>     </form> 

what in such cases keep full window occupying div on content while data loads in background http://jsfiddle.net/basarat/qfrje/:

.busypanel {     /* absolute position on */     position: absolute;     top: 1px;     bottom: 1px;     left: 1px;     right: 1px;     /* remove defaults */     border: none;     margin: 0;     padding: 0;     /* make sure stays on top */     z-index: 2500;     /* image */     background: grey;     /* initial visibility */     display: visible; } 

and remove when done loading:

$(".busypanel").fadeout('slow');