Segue modelos de Barra de Progressos com Bootstrap de forma bem simples.
Tenho três métodos para funcionar.
1) Modelo Básico:
<!DOCTYPE html>2) Com definição de Tempo
<html>
<head>
<title>SomarERP - Abrindo Caixa</title>
<link href="stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<script src="javascripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="javascripts/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<script language="javascript">
function processaBasico() {
var w = parseInt(document.getElementById('barraProgressoBasico').style.width);
var i = w + 1;
document.getElementById('barraProgressoBasico').style.width= (i) +'%';
$("#barraProgressoBasico").html(i+'%');
if(i<100) setTimeout('processaBasico()', 200);
}
</script>
<button onclick="processaBasico()">Básico</button>
<div class="progress progress-striped active">
<div id="barraProgressoBasico" class="progress-bar progress-bar-info" style="width: 0%;">0%</div>
</div>
</body>
</html>
<!DOCTYPE html>3) Uma barra executando depois da outra
<html>
<head>
<title>SomarERP - Abrindo Caixa</title>
<link href="stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<script src="javascripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="javascripts/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<script language="javascript">
function incrementaSegundos() {
var tempo = $('#segundosText').val();
var w = parseInt(document.getElementById('barraIncrementaSegundos').style.width);
var i = w + 1;
document.getElementById('barraIncrementaSegundos').style.width= (i) +'%';
$("#barraIncrementaSegundos").html(i+'%');
var seg = tempo * 1000;
if(i<100) setTimeout('incrementaSegundos()', seg);
}
</script>
<button onclick="incrementaSegundos()">Segundos Definidos ao lado</button>
<input type="text" id="segundosText" value="20">
<div class="progress progress-striped active">
<div id="barraIncrementaSegundos" class="progress-bar" style="width: 0%;">0%</div>
</div>
</body>
</html>
<!DOCTYPE html>Gostou da dica? Comenta e compartilha
<html>
<head>
<title>SomarERP - Abrindo Caixa</title>
<link href="stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<script src="javascripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="javascripts/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<script language="javascript">
function processaCertificado() {
var w = parseInt(document.getElementById('barraProgressoCertificado').style.width);
var i = w + 1;
document.getElementById('barraProgressoCertificado').style.width= (i) +'%';
$("#barraProgressoCertificado").html(i+'%');
if(i<100) setTimeout('processaCertificado()', 200);
else processaJava()
}
function processaJava() {
var w = parseInt(document.getElementById('barraProgressoArquivoJava').style.width);
var i = w + 1;
document.getElementById('barraProgressoArquivoJava').style.width= (i) +'%';
$("#barraProgressoArquivoJava").html(i+'%');
if(i<100) setTimeout('processaJava()', 200);
else processaCaixa()
}
function processaCaixa() {
var w = parseInt(document.getElementById('barraProgressoCaixa').style.width);
var i = w + 1;
document.getElementById('barraProgressoCaixa').style.width= (i) +'%';
$("#barraProgressoCaixa").html(i+'%');
if(i<100) setTimeout('processaCaixa()', 200);
else redirecionaVenda();
}
</script>
<div class="progress progress-striped active">
<div id="barraProgressoCertificado" class="progress-bar progress-bar-success" style="width: 0%;">0%</div>
</div>
<div class="progress progress-striped active">
<div id="barraProgressoArquivoJava" class="progress-bar progress-bar-info" style="width: 0%;">0%</div>
</div>
<div class="progress progress-striped active">
<div id="barraProgressoCaixa" class="progress-bar progress-bar-warning" style="width: 0%;">0%</div>
</div>
</body>
</html>
0 Comentários