How do I change the color of the Progressive bar when an error occurs?

Question

How do I change the color of the Progressive bar when an error occurs ?

<div id="divMenu"></div>
<div id="divModals"></div>
<div class="container">
    <label for="cliente">Arquivo</label>
    <div class="progress">
        <div id="pgrArquivos" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
            40% Complete (success)
        </div>
    </div>

My Script

var inicializarCadastro = page.inicializa;
page.inicializa = function() {
    $.getJSON(getHomeFolder() + "/jsondata/cadCliente.json", function(data) {
        page.json = data;
        inicializarCadastro();
    });
}

Answer 1

You can use the class progress-bar-danger, but there’s more.
You can take a look at the documentation or in this example:

$(".progress div").each(function () {
    var display = $(this),
        currentValue = parseInt(display.text()),
        nextValue = $(this).attr("data-values"),
        diff = nextValue - currentValue,
        step = (0 < diff ? 1 : -1);
    if (nextValue == "0") {
        $(display).css("padding", "0");
    } else {
        $(display).css("color", "#fff").animate({
            "width": nextValue + "%"
        }, "slow");
    }

    for (var i = 0; i < Math.abs(diff); ++i) {
        setTimeout(function () {
            currentValue += step
            display.html(currentValue + "%");
        }, 20 * i);
    }
});

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
    <div class="progress-bar" data-values="40">0</div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar" data-values="20">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" data-values="60">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" data-values="30">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" data-values="90">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" data-values="80">0</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" data-values="60">0</div>
    <div class="progress-bar" data-values="40">0</div>
</div>

Credits jsFiddle: http://jsfiddle.net/wholypantalones/LLHAx/