How to change the color of a bootstrap (twitter) progress bar at runtime

Question

I am using this progress bar :

http://twitter.github.com/bootstrap/components.html#progress

And would like to give it a custom color, known only at runtime (so hardcoding it in the css or less file is not an option)

I have tried this :

<div class="progress">
  <div id='pb' class="bar" style="width: 80%"></div>
</div>

<script>
  $('#pb').css({'background-color': "red"})
</script>

without success.

Answer 1

Your code is actually working, just that the progress bar is actually using a gradient as a color instead of a solid background-color property. In order to change the background color, set the background-image to none and your color will be picked up:

$('#pb').css({
    'background-image': 'none',
    'background-color': 'red'
});

Answer 2

There is now a bootstrap 3.2 progress bar designer tool.

http://bootstrapdesigntools.com/tools/bootstrap-progress-bar-designer/