El elemento <progress>
se introdujo en el estándar HTML 5.0. Su función es indicar el grado de progreso de una tarea (la típica barra de progreso, vamos). A fecha de hoy, puede usarse en cualquier navegador moderno (e incluso en las últimas versiones de Internet Explorer).
En este artículo explico cómo usarlo, qué ventajas y desventajas tiene, e incluyo un ejemplo que lo muestra funcionando, con un diseño unificado, incluso en navegadores no compatibles.
Funcionamiento
Su uso es bien sencillo:
<progress value="7.5" max="10"></progress>
La etiqueta de cierre </progress>
es obligatoria, y es que se puede (de hecho se recomienda) añadir dentro un texto para navegadores antiguos que no reconozcan este elemento:
<progress value="7.5" max="10"><strong>Progreso:</strong> 7,5/10</progress>
Este es el resultado, funcionando en tu navegador:
El aspecto variará según el navegador y el sistema operativo:
El atributo max
es opcional. Si no se especifica, el value
deberá estar entre 0.0 y 1.0.
Progreso indeterminado
Si no se especifica un value
, la barra quedará en estado de «progreso indeterminado»:
La pseudoclase CSS :indeterminate
se puede usar para seleccionar elementos <progress>
en estado indeterminado:
progress:indeterminate {
opacity: 0.5;
}
Ojo: Safari en iOS (pero no en macOS) es incompatible con el estado indeterminado: simplemente muestra la barra al 0%.
Ventajas e inconvenientes
Se pueden ver por ahí montones de variopintas implementaciones de barras de progreso hechas «a mano» (a base de elementos <div>
o similar), o bien utilizando bibliotecas externas como ProgressBar.js.
Veamos las ventajas e inconvenientes que tiene usar el elemento nativo <progress>
en lugar de reinventar la rueda.
Ventaja 1: rápido y fácil.
Ya has visto que el HTML necesario es extremadamente simple. Manipular el progreso vía JavaScript no es menos simple:
barraProgreso.value += 10; // Progresando de diez en diez
Ventaja 2: velocidad de carga.
ProgressBar.js ocupa 22 KB minificado. Incluso codificando una barra de progreso a mano, va a ser difícil que superes los 0 KB que ocupa el elemento nativo <progress>
.
Ventaja 3: accesibilidad de serie.
Una barra de progreso codificada con DIVs debe asegurar la accesibilidad para usuarios con discapacidad usando los correspondientes atributos ARIA, tanto en HTML como en las actualizaciones de estado vía JavaScript. Como mínimo:
role=progressbar
para explicitar que ese<div>
representa una barra de progreso.aria-valuenow
indica a las tecnologías de asistencia (como lectores de pantalla, por ejemplo) el valor actual del progreso. Debe omitirse si el progreso es indeterminado.aria-valuemin
indica el valor mínimo (normalmente cero).aria-valuemax
indica el valor máximo.
Y no, me temo que ProgressBar.js no es accesible (lo he mirado).
Inconveniente 1: estilos CSS complejos.
Como hemos visto, el aspecto de la barra de progreso depende del navegador y sistema operativo. Si necesitamos personalizar los estilos, tendremos que recurrir a algunas extensiones CSS no estándar (ver el Pen más abajo). Es algo complicado, pero no imposible.
Inconveniente 2: incompatibilidades.
Internet Explorer 9 y demás navegadores obsoletos son incompatibles con este elemento. Por suerte, para esos casos existe un magnífico polyfill que ocupa tan solo 4 KB minificado (sumando JavaScript y CSS) y, de regalo, incluye las características de accesibilidad.
El ejemplo
El siguiente ejemplo muestra como se puede usar un elemento HTML5 <progress>
de manera que el resultado sea idéntico en todos los navegadores.
Está probado en Chrome, Safari, Opera, Firefox, Edge, IE11, IE9 (con polyfill), Samsung Internet y alguno más que no recuerdo.
¿Y tú? ¿Cuál es tu elemento HTML5 favorito? ¡Se admiten sugerencias para el próximo!