Question

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.

<div class="progress bar-success">
<div class="bar" style="width: 'value'%"></div>
</div>

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”.

found smth like this with jquery http://jsfiddle.net/ZQrnC/ but think it would be better to have such a script for pure js to use it in bootstrap.

in this question also reccomended to use addClass but this seems too difficult for me

here some bootstrap progress bar markup http://jsfiddle.net/pZ5mG/

Thank you!

Answer 1

Here’s a strictly vanilla.js solution: http://jsfiddle.net/pZ5mG/2/

HTML

<div class="progress">
    <div id="myProgress" class="bar bar-danger"></div>
</div>​

JS

var bar = document.getElementById("myProgress");
var progress = 0;


function setProgress(percent){
    bar.style.width = percent + "%";

    if (percent > 90)
        bar.className = "bar bar-success";
    else if (percent > 50)
        bar.className = "bar bar-warning";
}

var interval = setInterval(
    function(){
        setProgress(++progress);
        if (progress == 100) window.clearInterval(interval);
    }, 100);

Is this about what you are wanting to accomplish? (Obviously you wouldn’t be using an Interval to update the progress)