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.

Deja un comentario

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