title: Showing a time countdown progress bar
body: <p>I came across this progress bar code on <a href="http://workshop.rs/2012/12/animated-progress-bar-in-4-lines-of-jquery/" rel="noreferrer">this site</a>.</p>
  
  <p>What I want to do is, have a 3 minute countdown and show how many minutes and seconds are left. So rather than displaying percentage I want to display time left. </p>
  
  <p>I use the following code:</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>progress(100, $('#progressBar')); // This is what the timer should update each second
  
  function progress(percent, $element) {
      var progressBarWidth = percent * $element.width() / 100;
      $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + " minutes/seconds to go");
  };
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="progressBar"&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> #progressBar {
    width: 923px;
    margin: 10px auto;
    height: 22px;
    background-color: #0A5F44;
  }
  
  #progressBar div {
    height: 100%;
    text-align: right;
    padding: 0 10px;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #CBEA00;
  }
  </code></pre>