title: progress bar countdown doesn't work
body: <p>Hello i'm trying to put a progress bar countdown using the code bellow  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function progress(timeleft, timetotal, $element) {
    var progressBarWidth = timeleft * $element.width() / timetotal;
    $element.find('div').animate({
      width: progressBarWidth
    }, 500).html(timeleft + " seconds to go");
    if (timeleft &gt; 0) {
      setTimeout(function() {
        progress(timeleft - 1, timetotal, $element);
      }, 1000);
    }
  
  };
  progress(20, 20, $('#progressBar'));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#progressBar {
    width: 90%;
    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;
    box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="progressBar"&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but it doesn't work , when a refresh the page i see only "20 seconds to go" without the bar in background and i can't find out what's the problem 
  please can u tell me what are the possible causes of this problem ?</p>