title: How to hide progress bar after all images are loaded
body: <p>I'm dealing with bootstrap bar preloading images on a page. Things works fine but I don't know how to make a progress bar disappear after all images are loaded. Here is my code:</p>
  
  <pre><code>&lt;div class="progress progress-info progress-striped active"&gt;
      &lt;div class="bar" id='fabbar' style="width: 20%"&gt;0%&lt;/div&gt;
  &lt;/div&gt;
  &lt;img src="http://placekitten.com/1000/1000" alt="" width="100" height="100" /&gt;
  &lt;img src="http://placehold.it/1000x1000" alt="" width="100" height="100" /&gt;
  &lt;img src="http://placebear.com/1000/1000" alt="" width="100" height="100" /&gt;
  &lt;img src="http://lorempixel.com/1000/1000" alt="" width="100" height="100" /&gt;
  &lt;img src="http://placedog.com/1000/1000" alt="" width="100" height="100" /&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(function () {
      var n = 0,
          $imgs = $('img'),
          val = 100 / $imgs.length,
          $bar = $('#fabbar');
  
      $imgs.load(function () {
          n = n + val;
          // for displaying purposes
          $bar.width(n + '%').text(n + '%');
  $('#imgLoader').hide();
      });
  });
  </code></pre>
  
  <p>Now I've got 2 problems. </p>
  
  <ol>
  <li>The whole bar is gone before it being load.</li>
  <li>Of what function to make a Percent number like 20%, 40%, 100%. Now it's 93.33333333333334%.</li>
  </ol>