title: make progress bar on images loading with bootstrap/jquery
body: <p>I try to make a progress bar with bootstrap css on images loading. For this, I use the following script : </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/&gt;
  &lt;script type="text/javascript"&gt;
  
  var n=0;
  var c=0;
  
  $('img').each(function() {
      n++; 
      var tmpImg = new Image() ;
      tmpImg.src = $(this).attr('src') ;
      tmpImg.onload = function() {
      c++;
      };
      });
  
  var interval = setInterval(function() {
      percent = n/100;
      loaded = c/percent;
  
      // for displaying purposes
      setBar(getBar()+50)
      // feed loaded var to the progressbar
      if (loaded == 100) {
      clearInterval(interval);
      }
  
      }, 1);
  
  function setBar(n) {
    var bar = document.getElementById('fabbar');
    bar.style.width = n+'%';
  }
  function getBar() {
    var bar = document.getElementById('fabbar');
    return parseInt(bar.style.width);
  }
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="progress progress-info progress-striped active"&gt;
  &lt;div class="bar" id='fabbar' style="width: 20%"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this doesn't work, i.e the progress bar doesn't progress. How could I do that ?</p>