Change Bootstrap progress bar dynamically

Answer 1

The code you use to update width is correct, but as @Brennan pointed out it has to run after the progress bar is rendered - e.g. by placing the script tag after the progress bar tag (fiddle) or by running it in the document ready handler (fiddle).

The following is the minimal version which does what you tried (the fiddles emulate progress running from 0 to 100):

$(function() {
     $("#progress-bar").css("width", "50%");
});

Another note on the code: along with the width of the progress bar you should update the aria-valuenow attribute which represents the current value of a range widget (here the progress bar) for the assistive technology browsers. In your sample you have aria-valuenow 45 but width 0, which is inconsistent.