PROGRESS BAR COM ERRO

10/04/2018

bom dia, estou usando bootstrap para fazer meu front End, o problema e que meu progress bar fica na mesma propor��o, exe: tenho 3 progress bar na tela os 3 ficam iguais! estando em 0 ou 50%
https://imgur.com/L83J2cv

como poderia corrigir isso?
segue c�digo abaixo..

<style>
                    .teste{
                        width: <?php echo $porc ?>;
                    }
                </style>
                <div class="container">
                    <div class="col-lg-12">
                        <div class="panel panel-green">
                            <div class="panel-heading">
                                Progresso Desenvolvimento Maquina <?php echo $serie ?>
                            </div>
                            <div class="panel-body">
                                <div class="col-lg-12">
                                    <p>Maquina <?php echo $serie ?> - <?php echo $grupo ?></p>
                                    <div class="container-fluid">
                                        <div class="progress">
                                            <div class="progress-bar progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
                                                100% - <?php echo $tempo_padrao ?> Horas
                                            </div>
                                        </div>
                                    </div>
                                    <div class="container-fluid">
                                        <div class="progress">
                                            <div class="teste progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" >
                                                <?php echo $porc_p; ?>%
                                            </div>
                                            <?php echo number_format($total / 100, 2, '.', '')
                                            //echo $total / 100; ?>Horas
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-footer -align-center">
                                <button class="btn btn-md btn-warning" >Informa��o</button>
                                Data de Entrega : <?php echo $data_f;?>
                        </div>
                            <!-- /.col-lg-4 -->
                        </div>
                    </div>
                </div>

Tiredmonkey

Curtir t�pico + 0

Responder

Posts

09/07/2018

Aparecida Gon�alves

Ol� Emerson,
tudo bem?
O Bootstrap oferece a barra no modo est�tico, acredito que voc� precisa trabalhar com um id ou classe que representa o preenchimento da barra, junto com uma fun��o em JavaScript para poder processar a anima��o da barra.
Segue um exemplo simples:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Progress Bar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body{font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 25px;}
#status{color: blue;}
#progressBar{border: 1px solid black;float: left;width: 80%;max-width: 1300px;margin-left: 1%;text-align: center;background-color: #cdcdcd;}
</style>
</head>
<body>
<div class="container">
<h1> Test Progress Bar</h1>
<progress id="progressBar" value="50" max="100">
</progress>
<span id="status"></span><br>
<h2 id="finalMessage"></h2>
</div>
<script type="text/javascript" language="javascript">
function progressBarSim(al){
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
status.innerHTML = al+"%";
bar.value = al;
al++;
var sim = setTimeout("progressBarSim("+al+")",300);
if(al == 100){
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(sim);
document.getElementById('finalMessage').innerHTML = "Barra completa";
}
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>
</body>
</html>
Espero ter ajudado!
Cida Luna.

Responder

Gostei + 0