¿Cuántas veces hemos necesitado mostrar el progreso de una operación al usuario? ¿E indicar el espacio disponible, el avance conseguido hasta el momento, etcétera? En numerosas ocasiones hemos hecho uso de controles de terceros para mostrar de una forma amigable esta información al usuario. Dentro de la especificación de HTML 5, nos encontramos con dos nuevas etiquetas que nos facilitarán este trabajo: progress y meter.

Progress

La etiqueta progress está pensada para mostrar el estado/progreso de una tarea. La forma de interpretar la misma por parte de los navegadores es con una barra de progreso:

<progress id="state" value="40" max="100">Progress tag is not supported.</progress>

Los atributos disponibles son value para conocer el valor actual y max para establecer el valor máximo. En este ejemplo, para simular el avance de una tarea se ha utilizado setInterval para aumentar el progreso de diez en diez cada dos segundos:

	var state = document.getElementById('state');
	setInterval(function(){
		if(state.value < 100){
			state.value +=10;
		}
		else{
			state.value = 0;
		}
	},2000);

Normalmente, en la subida de archivos, procesamiento de imágenes, etcétera se tomará como base alguno de los factores involucrados (bytes, número de imágenes, etcétera) y se obtendrá el porcentaje para saber cuál es el valor dentro del rango establecido.

Meter

Por otro lado, la etiqueta meter tiene como finalidad representar un valor dentro de un rango conocido, pero no el progreso de una acción. Esta etiqueta no está soportada en algunos navegadores, como IE 10, las versiones del 6 al 15 de Firefox o iOS 7, pero la forma de representar la misma es también a través de una barra de progreso, e incluso coincide en el aspecto de progress en algunos de ellos:

Meter tag is not supported

<meter id="diskUsage" value="10" max="100" low="30" high="80" optimum="60">Meter tag is not supported</meter>
<input class="btn" id="btnAdd" type="button" value="+" />
<input class="btn" id="btnMinus" type="button" value="-" />

En este caso, los valores a establecer son más específicos:

• value: determina el valor actual.
• max: Valor máximo.
• low (Opcional): Dentro del rango establecido se puede indicar a partir de qué valor se considera un número bajo dentro del mismo. En algunos navegadores, la barra cambiará de color cuando se traspase este limite.
• high (Opcional): Al igual que low, se puede indicar a partir de qué valor se considera un número alto dentro del rango. En este supuesto, la barra también cambiará de color cuando se traspase este limite.
• optimum: Si bien visualmente no nos aporta información, cuando establecemos los atributos low y high podemos indicar también cuál sería el valor preferente dentro del rango.

En este ejemplo, se han añadido dos botones para aumentar o disminuir el valor, donde se puede observar el cambio de color de la barra cuando pasamos los límites de los atributos low y high.

function id(elem){
	return document.getElementById(elem);
}
var diskUsage = id('diskUsage');
id('btnAdd').addEventListener("click",function(){
	if(diskUsage.value < 100)
		diskUsage.value += 10;
});
id('btnMinus').addEventListener("click",function(){
	if(diskUsage.value > 0)
		diskUsage.value -= 10;
});

En el siguiente enlace podemos ver la compatibilidad con los navegadores más comunes: Can I use Progress & Meter?

Espero que sea de utilidad.

¡Saludos!