Show Progress Bar while only on Page Load.

Question

Hi Experts,
I want to show progress bar every time when page loads.
Progress bar is coming on the page. but it is not going off after page is loaded.
Below is the code which i added for the Progress bar.
//written on Header Text of Page
<script type="text/javascript">
<!--
function html_Submit_Progress(pThis){
$x_Show('AjaxLoading');
window.setTimeout('$s("AjaxLoading",$x("AjaxLoading").innerHTML)', 100);
//-->
</script>
//written on footer text of Page
<style> #AjaxLoading{padding:5px;font-size:18px;width:200px;text-align:center;left:20%;top:20%;position:absolute;border:0px solid #666;}
</style>
<div id="AjaxLoading" style="display:none;"><br /><img src="#APP_IMAGES#progress_bar.gif" id="wait" /></div>
//called the function Execute on Page Loads 
html_Submit_Progress(this);Progress bar is continuously showing on the page after page is loaded.
I want only to show only page loads.
Please help me .
Apex Version : Apex 4.1
DB Version : 10g
Regards,
Jitendra

Answer 1

Hide the loader element when the page has loaded. Put this in the javascript section
$(document).ready(function(){ $x_Hide('AjaxLoading'); });Or put it in the page load section
$x_Hide('AjaxLoading');Or create a dynamic action which fires on page load, select a hide action, and use a jQuery selector to target '#AjaxLoading' as an affected element.