Bootstrap

Barra de progreso en Bootstrap y Java Script

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:

Barra de progreso en Bootstrap

Barra de progreso en Bootstrap

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.

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

10 comments

    1. 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:

      <?php
       Aquí va el código PHP
      ?>
      

      Para generar código HTML con PHP tenes que usar la función echo de la siguiente forma:

      <?php
        echo '<b>Hola Mundo en Negrita!</b>';
      ?>
      

      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.

  1. 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

    1. 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.

  2. 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.

    1. 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.

    1. 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;
      }
      

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *