update: problem showing image while waiting to page to load

Question

Hi!

I'm trying to show an image to let the user known that something is happening while some pages are being loaded.

I tried several examples that I found in google.
My goal is every time that I click in some link, the image should appear to let me known that the page is loading. But I'm not able to do that.

So far what I accomplish is that the image appear when I load that page and don't disappear, but I would like to make this available when I click on a link.

What I've done:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(document).ready(function()
{
$("#loading").hide();
});
</script>

<img id="loading" alt="" src="/ajax-loader.gif"/>

#loading {
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 position: fixed;
 display: block;
 opacity: 0.7;
 background-color: #fff;
 z-index: 99;
 text-align: center;
}

#loading-image {
 position: absolute;
 top: 100px;
 left: 240px;
 z-index: 100;
}

Any help is appreciate :) Thanks

Answer 1

Maybe this will be of some help:

http://docs.jquery.com/UI/Progressbar

Answer 2

Here's a simple one: http://www.webappers.com/progressBar/

That's the first result in google when I type in "js progress bar" -- there's hundreds of others.