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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

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

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

Deja un comentario

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