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:
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.
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
¿Buscas trabajo de programador?
4 respuestas a “Barras de progreso con jQuery”
Deja una respuesta
47 artículos que te podrían interesar
Ver más sobre
Me sirvió, gracias
GRANDE VIEJO PELAO
Excelente ejemplo..!!!!
Muy bueno este código. Muy agradecido quedo. Saludos