2

I have written this code I learnt from a beginners jQuery book, which works great as a preloader for the page, but how do i create a percentage (%) counter for it? - Based upon how much body content is loaded? At the moment I just have an animated GIF - but I'd like something a little more advanced! :)

// Lets preload!
$(window).load(function() {
  $('#preloader').fadeOut('slow', function() { $(this).remove(); });
});

CSS:

#preloader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: #009933 url(uploads/images/ajax-loader2.gif) center center no-repeat;
}

Any help would be greatly appreciated!

Thanks.

Gert Grenander
  • 16,866
  • 6
  • 40
  • 43
Karlgoldstraw
  • 618
  • 2
  • 11
  • 25
  • 1
    What you are doing here is not a preloader. You are just showing an image until the content is loaded ... – Jan Hančič Nov 21 '10 at 23:28
  • @Jan - Yes you are right, I am trying to show a progress counter/page until the content is loaded in effect giving the same effect as a preloader. It doesn't need to 'technically'be a preloader, just give the illusion so that the main page loads in the order it needs to in the background, unseen by the user, then shows a tidy loaded page when it's ready. – Karlgoldstraw Nov 22 '10 at 11:00

2 Answers2

1

this jQuery plugin might help.

Sebastian Patane Masuelli
  • 4,217
  • 1
  • 18
  • 23
1

I used this plug-in for my website... maybe it's ok for you as well..

Andrea Turri
  • 6,480
  • 7
  • 37
  • 63