Page loading animation

Question

Hi

I want to display a loading animation while my page is loading, and when loading is complete then obviously hide it.

I am working in ASP.NET using Masterpages, just wondering there is a a simple way of doing this using JQuery?

Any pointers would be appreciated.

Thanks

Answer 1

Consider using UpdateProgress control

Answer 2

Just place an image with the animated gif on the page. Give it an id of loadingImage and add the following script:

$(document).ready(function(){
    $('#loadingImage').hide();
});

Incidentally, how long is your page taking to load? Is it using AJAX calls to load data? Maybe you should look into this and in the callback handler, call the hide() function on your image.

Answer 3

When both answers above were along the right lines, I could get either do exactly what I needed in my scenario.

However I found the following post that on SO that has provided me the solution I was after.

http://stackoverflow.com/questions/2755041/colorbox-show-simulate-loading-animation-for-iframe-content

Thanks all for your input.