title: Using a Jquery loading bar on page load
body: <p>w=Hi all, what I am trying to achieve is the animation of a progress bar namely .progress div from 0% width on document.ready to 100% width on document.load however I want this to be animated smoothly - I have a feeling this could be done via CSS but it is not cross browser and at the moment I the width of .progress div goes nearly directly to 100% width. Its containing div #overlay will also fade on document.ready... Any ideas?
  Heres what I have at the moment;</p>
  
  <p>CSS</p>
  
  <pre><code>.progress {
          width: 100%;
          height: 4px;
          background: none;
          position: absolute;
          top: 0;
          text-align: left;
  }
  
  .progress div {
         background: #000;
  }
  </code></pre>
  
  <p>JQuery</p>
  
  <pre><code>var progress = $('.progress div');
  
  $(window).ready(function(){
      progress.css('width','0'+'%');
  
  }); 
  
  $(window).load(function(){
      //Set width to 100%
      progress.css('width','100'+'%');
  
     // PAGE IS FULLY LOADED  
     // FADE OUT YOUR OVERLAYING DIV
     $('#overlay').fadeOut();
  
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="overlay"&gt;
          &lt;div class="progress"&gt;
              &lt;div class="bar"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="logo"&gt;
          &lt;img src="images/logo.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance for any help ;)</p>
  
  <h2>EDIT</h2>
  
  <p>I have tried using css transitions however the same scenario happens, their just goes straight to 100% instead of going over 4s as stated in the transition statement - this is show below </p>
  
  <pre><code> -webkit-transition: width 500ms ease-out 1s;
          -moz-transition: width 500ms ease-out 1s;
          -o-transition: width 500ms ease-out 1s;
          transition: width 500ms ease-out 1s;
  }
  </code></pre>