title: Dynamically change the color of progress bar by javascript for Twitter Bootstrap
body: <p>Bootstrap has many pre-defined styles for progress bar, but how to make them some dynamic changing feature. With my poor knowledge of javascript (first stages on codeacademy), can't make them change dynamically by width style changing, and that's the question.</p>
  
  <pre><code>&lt;div class="progress bar-success"&gt;
  &lt;div class="bar" style="width: 'value'%"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>need to define by javascript if 'value', if "bar" style width >50% when remove parent class "bar-success" and add class "bar-warning", when style width >80% change it to "bar-danger".</p>
  
  <p>found smth like this with jquery <a href="http://jsfiddle.net/ZQrnC/" rel="nofollow noreferrer">http://jsfiddle.net/ZQrnC/</a> but think it would be better to have such a script for pure js to use it in bootstrap.</p>
  
  <p>in <a href="https://stackoverflow.com/questions/9952446/how-to-change-the-color-of-a-bootstrap-twitter-progress-bar-at-runtime">this question</a> also reccomended to use addClass but this seems too difficult for me </p>
  
  <p>here some bootstrap progress bar markup <a href="http://jsfiddle.net/pZ5mG/" rel="nofollow noreferrer">http://jsfiddle.net/pZ5mG/</a></p>
  
  <p>Thank you!</p>