Elemento HTML5 <progress>: la barra de progreso nativa del navegador

Gráfica detallando los selectores CSS a usar con el elemento HTML5 progress

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.

caniuse.com muestra una disponibilidad bastante aceptable.

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:

Progreso: 7,5/10

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!

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.