Barras de progreso con jQuery

Cuando un proceso tarda en dar un resultado es muy importante informar al usuario de ello y no dejar una página en blanco que no dice nada que puede acabar desesperando al usuario en la espera. Es muy probable que decida cerrar la ventana si no ve nada. Una buena idea para evitar esto es mostrar algo que indique que la página se está cargando, las barras de progreso pueden ser ideales para estas situaciones.

Las barras de progreso son elementos gráficos que están presentes en casi todas las aplicaciones que realizan operaciones largas tales como cargar grandes archivos, procesamiento de imágenes o procesamiento de vídeos.

Estas barras se utilizan para indicar al usuario que el ordenador está pensando o está ocupado haciendo alguna tarea. Lo mismo puede ocurrir en la carga de páginas Webs, aplicaciones o cualquier funcionalidad que requiera un proceso.

En este tutorial vamos a explicar un ejemplo práctico que te va a resultar muy útil para aplicar a tus aplicaciones o páginas Webs desarrolladas con jQuery o JavaScript.

Para la parte visual de las barras de progreso nos vamos a apoyar en la librería más popular para la interfaz gráfica, Bootstrap 4.

Para la implementación de la barra de progreso, en la cabecera o dentro de la etiqueta <head> de mi archivo HTML, agrega lo siguiente:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function() {
    var percent = 0;
 
    timerId = setInterval(function() {
        //increment progress bar
        percent += 5;
        $('.progress-bar').css('width', percent+'%');
        $('.progress-bar').attr('aria-valuenow', percent);
        $('.progress-bar').text(percent+'%');
 
        //complete
        if (percent == 100) {
            clearInterval(timerId);
            $('.information').show();
        }
 
    }, 1000);
});
</script>

Apoyándonos en la librería jQuery, esperamos a que se cargue el documento para recorrer la barra de progreso utilizando la función setInterval() de JavaScript.

En el código anterior estamos incrementando la barra de progreso en 5% cada segundo. La variable percent se va incrementando cada vez en 5 unidades y su valor es mostrado dentro de la barra de progreso que tendremos en nuestro cuerpo de la página. Al completarse o llegar al valor 100, hacemos una limpieza de nuestro contador y mostramos un mensaje informativo que indica el fin del proceso.

En el cuerpo o dentro de la etiqueta <body> agregaremos los contendedores que van a representar la barra de progreso:

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<br/>
<div class="information" style="display:none;">              
    <div class="alert alert-info">Lorem Ipsum...</div>
</div>

El código HTML se compone de 2 contenedores. Uno representa la barra de progreso y el otro el bloque de información que se muestra al final de proceso.

Ver demo Descargar

Hoy en día las barras de progreso son omnipresentes. Las encontramos en aplicaciones para Windows, aplicaciones Web y en apps para teléfonos móviles de última generación. Hasta en la Play Station puedes verte con las dichosas barras de progreso, por ejemplo, cuando se está actualizando algún juego o la misma consola.

Se podría decir que las barras de progreso forman parte de nuestra cultura quizás sin que te hayas dado cuenta ya que están presentes en toda la tecnología informática.

A pesar de que conviven con otros indicadores, como por ejemplo, los porcentajes, los relojes de arena, punteros animados del ratón o iconos gif de carga, las barras de progreso continúan siendo el recurso gráfico más utilizado cuando hay que describir el progreso de una tarea en un entorno informático.

¿Estás de acuerdo?

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

2 respuestas a “Barras de progreso con jQuery”

  1. JOSE FERNANDEZ dice:

    Excelente ejemplo..!!!!

  2. Christian dice:

    Muy bueno este código. Muy agradecido quedo. Saludos

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre