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

Navigation
1

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();
    });
}
    
asked by anonymous 25.05.2016 / 22:54

1 answer

3

You can use the progress-bar-danger class, but there are 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><divclass="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>

jsFiddle Credits: link

    
25.05.2016 / 23:01
Read an Array or Bulk Collect as a table in an Oracle PLSQL Multiple INSERT Models Laravel 5