Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Guest

Could I have a page loading animation?

Question

Guest

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?

Edited by Guest

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0
Guest

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?

Edited by Guest

Share this post


Link to post
  • 0

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.

Edited by dom_1080

Share this post


Link to post
  • 0
Guest

@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;
});

Edited by Guest
Added more clarification

Share this post


Link to post
  • 0
Guest

@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.

Edited by Guest

Share this post


Link to post
  • 0
Guest

@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.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

@squareguru does this code still exist anywhere?


motion graphic designer in SoCal - feel free to check out my site (built on the Polaris template): [motion graphic design by jonberrydesign][1] [1]: http://jonberrydesign.com

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...