Blog
En este tutorial aprenderemos a realizar una sencilla barra de progreso en Bootstrap y Java Script. Esta barra puede ser útil en muchos casos, pero por lo general es utilizada cuando se realiza una operación que tarda mucho tiempo.
Ejemplo de barra de progreso en Bootstrap
Para insertar una barra solo debemos utilizar el siguiente código HTML que utiliza clases de Bootstrap:
<div class="progress">
<div id="bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">0% Complete</span>
</div>
</div>
Pero obviamente que con ese código nada más tendríamos una barra de progreso estática. Para poder darle una animación y con el fin de explicar como funciona vamos a utilizar la función setInterval en Java Script, con la cual iremos incrementando su ancho cada un segundo.
var progreso = 0;
var idIterval = setInterval(function(){
// Aumento en 10 el progeso
progreso +=10;
$('#bar').css('width', progreso + '%');
//Si llegó a 100 elimino el interval
if(progreso == 100){
clearInterval(idIterval);
}
},1000);
Lo que sucederá con ese código en Java Script, es que la barra de progreso se incrementará un 10% por cada segundo que pase hasta que llegue a 100%.
Para que lo puedan probar bien les dejo el código completo:
<!DOCTYPE html>
<html>
<head>
<title>Barra de progreso en Botstrap</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress" style="margin:100px">
<div id="bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">0% Complete</span>
</div>
</div>
<script>
var progreso = 0;
var idIterval = setInterval(function(){
// Aumento en 10 el progeso
progreso +=10;
$('#bar').css('width', progreso + '%');
//Si llegó a 100 elimino el interval
if(progreso == 100){
clearInterval(idIterval);
}
},1000);
</script>
</body>
</html>
Al ejecutar el código anterior la barra de progreso en Bootstrap se mostrará de la siguiente manera:
Bueno hemos llegado al final de este pequeño tutorial, espero que les haya servido y ante cualquier problema no duden en dejar un comentario.
Hola, excelente tu post, cómo puedo implementar el script dentro de código PHP?
Gracias.
Hola Roberto, recordá que para programar en PHP la extensión del archivo debe ser .php, luego dentro del mismo, el código PHP lo tenes que incluir de la siguiente forma:
Para generar código HTML con PHP tenes que usar la función echo de la siguiente forma:
y finalmente también podes incluir código HTML por afuera de PHP como se muestra a continuación:
<html> <head> <title>Prueba</title> </head> <body> <?php echo '<b>Esto es una prueba!</b>'; ?> </body> </html>Espero que te sirva para que puedas adaptar tu código, cualquier cosa no dudes en avisarme. Saludos.
Hola me ayudo bastante solo tengo una duda, cuando llegue al 100 como restablecer para que vuelva a iniciar el contador y la barra empiece nuevamente a cargarse
Hola Luis, simplemente tenés que poner la variables “progreso” en 0 y ejecutar nuevamente el código:
$('#bar').css('width', progreso + '%');Cualquier otra duda avisame, saludos.
Excelente aporte, muchas gracias compañero
Por nada Francesco, me alegra que te haya servido.
Pero la barra la muestra despues de cargar la página lo cual no tiene sentido, debe ser antes de cargar la página; osea ni bien esta cargando la página y que la barra llegue al 100% una vez que cargo la página. Todo eso lo hace despues de cargar la página, lo cual es innecesario.
Hola Ezequiel, un gusto que estes por aquí. Como decis vos esta barra no se usa para antes de que cargue la web, más bien se utiliza por ejemplo cuando se requiere realizar tareas que duren cierto tiempo con Java Script (como lo puede ser una petición AJAX), en esos casos se mostraria la barra de carga.
Cómo podría implementar mientras se ejecuta un for con js?
Hola Jaime, dentro del for por cada iteración tendrías que calcular el porcentaje de carga, según el tamaño de la lista y la iteración actual. Por ejemplo:
lista = [1, 2, 3]; for(i=0; i < lista.length; i++){ porcentaje = (i * 100) / lista.length; }¿Como puedo hacer para que al terminar el tiempo de la barra de progreso esta me mande a otra pagina? ¿es decir que cuando termine el tiempo de la barra esta automáticamente me dirija a cualquier otra pagina que yo decida colocar?
¿otra pregunta seria como puedo hacer una barra circular?
Muchas gracias por sus respuestas
Hola, me gustó el tutorial, pero es posible usarlo como loader de un sitio web?