title: bootstrap progress bar not animating
body: <p>I've installed bootstrap to my <code>Rails 4</code> application using the <a href="https://github.com/twbs/bootstrap-sass" rel="noreferrer">ruby gem</a>.</p>
  
  <p>I have copied and pasted the code for an animated progress bar straight from <a href="http://getbootstrap.com/components/#progress-animated" rel="noreferrer">bootstraps docs</a> into my page:</p>
  
  <pre><code>&lt;div class="progress progress-striped active"&gt;
     &lt;div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"&gt;
        &lt;span class="sr-only"&gt;45% Complete&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the bar is not animating. The only thing I can think of is the fact that I changed the bar's color in the <code>sass</code> variables.</p>
  
  <p>Why isn't it animating?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>What my bar looks like: 
  <img src="https://i.stack.imgur.com/4sRdQ.png" alt="broken progress bar"></p>
  
  <p><strong>Edit</strong></p>
  
  <p>Here is the CSS being applied when I use the <code>active</code> class:
  <img src="https://i.stack.imgur.com/opcnx.png" alt="enter image description here"></p>