title: Building a Progress bar for Loading everything before display
body: <p>Hello i really try and search before ask.. Im trying to use jquery for a progress bar, i found a lot of info, the problem is most of the examples are just "animations" i mean, they dont really display the %, of the loading process.. and i cant find a way to do it.</p>
  
  <p>Im trying to use this <a href="http://www.htmldrive.net/items/show/791/Very-Beautiful-CSS3-And-JQuery-progress-bar" rel="nofollow noreferrer">http://www.htmldrive.net/items/show/791/Very-Beautiful-CSS3-And-JQuery-progress-bar</a></p>
  
  <p>Mixed With the correct answer on this question. <a href="https://stackoverflow.com/questions/8442363/how-to-create-a-jquery-loading-bar-like-the-ones-used-on-flash-sites">how to create a jQuery loading bar? (like the ones used on flash sites)</a></p>
  
  <p>But i just can´t manage to merge </p>
  
  <pre><code>$.when($.ajax("video1.ogv"))
  .then(function () {
      videoLoaded[1] = true;
      updateProgressBar();
  });
  
  $.when($.ajax("video2.ogv"))
  .then(function () {
      videoLoaded[2] = true;
      updateProgressBar();
  });
  
  $.when($.ajax("video3.ogv"))
  .then(function () {
      videoLoaded[3] = true;
      updateProgressBar();
  });
  
  var updateProgressBar = function() {
      // iterate though the videoLoaded array and find the percentage of completed tasks
      $("#progressbar").progressbar("value", percentage);
  }
  </code></pre>
  
  <p>So the bar on CSS that i show you .. really display the % that has been loading of the content of #main_content or a video like in example..</p>
  
  <p>Hope i make my self clear because my english its very bad.</p>