Elemento progress de HTML5

La retroalimentación que nuestro sistema proporciona a los usuarios, es uno de los procesos pilares para lograr una interacción adecuada. Gracias a esto el usuario puede identificar errores, avances, la situación en que se encuentra un proceso y el resultado conseguido al realizar cualquier otro tipo de acción.

Cuando construimos sitios y aplicaciones web, es necesario proporcionar ciertos datos esenciales para que el usuario se mantenga informado sobre el progreso de su petición o tarea, sin importar su tipo, ya sea la subida de un archivo, la carga de un video o la importación de datos. Para realizar esta función, HTML5 nos facilita las cosas y nos proporciona la etiqueta progress, un elemento cuyo único propósito es mostrar el avance de un proceso.

Definición

El elemento de progress representa el avance de una tarea y es parte de los elementos de un formulario. El progreso puede ser desplegado de dos formas, una de éstas es de manera indeterminada, es decir cuando no se tiene en claro cuanto tiempo resta para concluir la tarea, por ejemplo cuando esperamos respuesta de host remoto, y la otra forma es con un valor número entre el 0 y un máximo establecido, especificando explícitamente la fracción de trabajo que hasta el momento se ha completado. Si la tarea en sí puede resultar irrelevante, pero si el despliegue de su progreso no lo es, es tiempo de usar esta etiqueta.

Atributos

Hay cuatro atributos que se han establecido para el elemento progress, estos son max, value, position y labels. Antes de echar un vistazo a cada uno de estos atributos por separado, es necesario analizarlos desde un enfoque general, para esto empezaremos con algunas notas y aclaraciones importantes sobre ellos.

Si el atributo value esta presente en el elemento, entonces se considera que el progreso es de tipo determinado, es decir que tiene límites exactos. De lo contrario, se considera que la etiqueta esta definiendo un progreso indeterminado. Si no se incluye el atributo max, el rango de valores aceptado por defecto para la barra de progreso se encuentra entre 0.0 y 1.0.

Se recomienda siempre incluir el valor actual y el valor máximo (si es que existe uno), como el texto dentro del elemento progress, de esa manera la información permanecerá será visible para los usuarios que aún utilizan navegadores antiguos. Ahora sí, es tiempo de analizar cada uno de estos atributos por separado.

Max

El atributo max es un número flotante, el cual se encarga de indicar la cantidad de trabajo restante para que la tarea llamada, se pueda considerar totalmente completa. El valor predeterminado de este atributo es el número 1.0.

Value

Al igual que max, este atributo tiene como valor un número flotante, el cual representa el progreso actual de la tarea correspondiente. Su valor va desde 0.0 al valor máximo establecido en el atributo max, en caso de no existir 1.0 el rango será de 0.0 a 1.0.

Position

Este es un atributo de sólo lectura, el cual se encarga de devolver al posición actual del elemento progress. Este valor equivale a la operación divisora de value/max en un elemento de progreso determinado, y tomado el valor de -1 en uno indeterminado, ya que la posición no puede ser determinada con precisión.

Labels

Labels también es un atributo de sólo lectura, su función es devolver una lista de etiquetas que el elemento progress utiliza.

Ejemplos

Es tiempo de poner en práctica lo escrito y ejemplificar algunas situaciones en donde se pueda utilizar el elemento progress.

Barra de progreso indeterminada

Para mostrar una barra de progreso indeterminada, basta con utilizar el siguiente código:

<progress id='barra_progreso'></progress>

Puesto que no tenemos idea de cuánto tiempo va a tomar la tarea, el navegador simplemente mostrará la barra de progreso hasta que la tarea sea completada, para después ocultarla o reemplazarla por un mensaje de proceso completado.

Barra de progreso determinada

Si lo que deseamos es una barra que si tenga valores establecidos, debemos utilizar este código:

<progress id='barra_progreso' max='90'><span>0</span>%</progress>

Podemos hacer uso de JavaScript para modificar su posición en base al avance de un proceso:

var barra_progreso = document.getElementById('barra_progreso');
var actualizar_progreso = function(valor) {
  barra_progreso.value = valor;
  barra_progreso.getElementsByTagName('span')[0].innerHTML = Math.floor((100 / 90) * value);
}

Ten en cuenta que nuestra barra de progreso puede tener un valor máximo de 90, por lo que las llamadas a la función a actualizar_progreso tendrán valores entre 0 y 90, siendo este el valor que también se mostrará dentro del elemento progress, de modo que sea visible como una simple cadena de texto representando el porcentaje, para que los usuarios de los navegadores antiguos puedan ver el avance.

Navegadores que soportan la etiqueta

El elemento progress tiene un buen soporte en los principales navegadores actuales. Para el caso de Safari sólo es soportado a partir de la versión 6 y en Internet Explorer sólo a partir de la versión 10.

Conclusión

La funcionalidad del elemento progress puede resultar bastante similar a la del elemento meter, el cual también fue introducido con HTML5, pero puede distinguirse como un elemento más específico, el cual sólo debe ser utilizado para medir el progreso de una tarea. Es muy importante tener en mente esto al momento de decidir cuál de los dos elementos utilizar.

Como su soporte en los navegadores modernos es muy bueno, definitivamente vale la pena utilizar este elemento, pero debemos asegurarnos de que proveemos una alternativa textual y visible para los usuarios que siguen utilizando navegadores antiguos.