title: How do I create a jQuery preloader with a percentage counter?
body: <p>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! :)</p>
  
  <pre><code>// Lets preload!
  $(window).load(function() {
    $('#preloader').fadeOut('slow', function() { $(this).remove(); });
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated! </p>
  
  <p>Thanks.</p>