Repositioning loading image

Question

I have a loading image (gif) that shows up when a user is waiting for a response to an action on a ASP.NET page.

The way it's implemented currently is:

In a JS file, I have:

document.write( '<span class="loadingbar" ID="loadingbar"><p>Loading Data... </p>' );
document.write( '<img id="loadingbarimage" src="Images/loading.gif" />' );
document.write( '</span>' );

In the Master page, I include this javascript file

I do have code that shows/hides the image.

It works great when a user is looking at the top of the page. But once, he scrolls down, the image is obviously not seen. Is there a way to reposition the image based on what page position the user is in?

Answer 1

try using the css "position" property with the "fixed" value

example:

#loadingbar{
position: fixed;
display:block;
top: 15%;
left: 50%;
margin-left: -10px; /* half of the width */
z-index: 9999;
width:200px;
}

That will make your "loadingbar" show up always 30px from the top and centered. and then once everything is loaded you can just remove the #loadingbar.