-1

Maybe this question was before but I wasn't able to find relevant answer for my needs. What I would ask is how people make loading text, like text is grey for example and from left to right it is becoming white while page load. When it reach end - page is loaded and page show. Same thing with spinners... Or another example is how to make page show loading 0%, 1% - 100% and when it's 100% page load... What is best way to accomplish this?

Thanks.

muu_ujo
  • 23
  • 1
  • 4
  • Creating a script like this is difficult and can't be done by javascript itself. If you've seen some progress-bar like this it is most likely programmed in Flash. – OptimusCrime Jul 21 '13 at 16:09
  • These answers will at least help you to build the bar itself; knowing what % the page is loaded will require other technology as Optimus points out. See this question: http://stackoverflow.com/questions/10007212/twitter-bootstrap-progress-bar-animation-on-page-load – Patrick Moore Jul 21 '13 at 16:14

1 Answers1

0

Some comments here say its not possible to do this without Flash but I have seen this done in pure html before. Its common in complex demo / visualisation apps and web apps.

The trick is that the page loads normally then some JavaScript code kicks in to preload all the images and other resources into a cache. You can monitor the progress of this using JavaScript and update a progress bar while you're doing it.

This article discusses caching images only but the first comment at the end links to an article about caching other resources:

I've also seen this done quite a lot if the page loads a lot of its content through an AJAX request. To enable this would require quite a structural change to your site though if you're not already loading in parts of the page via AJAX. If you use ajax then you can send the request out, set a spinner animation to display, and then have a "ajax request complete" callback which would remove the spinner and say "done!". This is not as interactive as the progress bar option though.

Finally you could do a really basic version of this I guess by adding some just after the <body> to hide the page and then in a jquery ready event you could fade the div out that hid the content. No interactive progress bar but I think that would work.

rtpHarry
  • 13,019
  • 4
  • 43
  • 64