Could I have a page loading animation?

Is it possible to create a loading animation to display while the content on a homepage is loading?

And is there any standard graphics other than a progress bar that are quick and easy to implement?

It it was put in the global header wouldn’t it effect the load on every page? I am trying to find a way to do this only on load for the landing page. Where else could you put the code?

I found this very straightforward to follow in terms of getting a loading page in place: Display Loading Image While Page Loads.

Does anyone more jQuery literate know how I would be able to set the page loading animation to last 5 seconds before fading, unless the page loaded before that time in which case it could reveal the page early?

Any help would be very much appreciated, I find that some stray elements on my homepage pulled in from other sites can have delays that cause the animation to show for 8 seconds etc. when the page has been 95% loaded many seconds earlier.

@octopus Is there a way to make a minimum time of the loader screen visible for even if the page is loaded? Also I would like to use static image rather that the GIF URL you provided.

I found something similar to this on Stack Overflow, but I am not a jQuery or JavaScript coder, so I am having a hard time plunging it into the code you listed above. The callouts would need to be modified, but this is what they have:

$('.m_top').click( function(){          

   var name= $(this).attr('href');
   $('#c_area').html('<img src="images/loading.gif" alt="Wait" />');
   setTimeout( function() {
      $("#c_area").hide().load(name).fadeIn("normal");
   },2000);

   $("#myDiv").html('');
   return false;
});

@octopus any further luck? In the article is reference the setTimeout being able to set that minimum time on the page. I guess that was "similar" to someone still learning JQuery and JS.

@octopus Thanks for updating this answer. Delay works great now. The main reason I wanted to have a delay was to host an image over a background color with a progress bar showing the page loading. I thought I could achieve this by placing a child class in the div class you recommend and setting the style to fixed with a higher z-index, but this does not seem to let the image show. The progress bar is another thing altogether.

So I am using the Aviator template, and when I load this into the sitewide Code Injection, it works. I actually just wanted it to happen on the welcome page, which is an Aviator infopage. I entered it into the header code injection, then added a code block for the div because there is no footer code injection for an infopage. Nada. Any ideas?

Site: www.readingremedy.org

Thank you so much!

I'm looking for a loading animation that will constantly display a percentage of image loaded until complete. Any ideas on where I might find such code?

@squareguru does this code still exist anywhere?