PROGRESS BAR COM ERRO
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..
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
Curtidas 0
Respostas
Aparecida Gonçalves
10/04/2018
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:
<!-- Animar barra de progresso -->
<!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.
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:
<!-- Animar barra de progresso -->
<!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.
GOSTEI 0