Uso y diferencias de cómo usar meter y progress de HTML5⌗

HTML5 introdujo nuevas etiquetas que permiten construir componentes de interfaz de usuario comunes sin necesidad de JavaScript adicional. Dos de estos elementos son <progress> y <meter>, útiles para mostrar progreso de tareas y mediciones dentro de un rango conocido, respectivamente. Al final del artículo tendrás un ejemplo aplicado.

La etiqueta <progress>:⌗

<progress> permite crear fácilmente barras de progreso en aplicaciones web. Es útil para mostrar el avance de tareas como la carga de archivos o la navegación en formularios de múltiples pasos.

<progress value="50" max="100"></progress>

Hay dos atributos que debe especificar en un elemento <progress>: max y value. El atributo max especifica el total, y el atributo value especifica cuánto del total se ha completado.

Si se omite el atributo value, el navegador mostrará una barra de progreso indeterminada, útil cuando no se conoce el tiempo exacto de finalización.

Para personalizar el estilo de las barras de progreso, se pueden utilizar pseudo-elementos específicos para cada navegador. A continuación, se muestra un ejemplo que funciona en navegadores modernos:

progress {
  appearance: none;
  width: 100%;
  height: 20px;
  border-radius: 4px;
  background-color: #eee;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

A la fecha de publicación de este artículo, para customizar los estilos de progress se deben usar pseudo-clases CSS específicos:

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 4px;
}

progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 4px;
}

progress::-moz-progress-bar {
  background-color: blue;
  border-radius: 4px;
}

Esto crea una barra de progreso con esquinas redondeadas y un color verde para indicar el progreso.

La etiqueta <meter>:⌗

<meter> se utiliza para representar una medición dentro de un rango conocido, como el uso de espacio en disco o la temperatura. A diferencia de <progress>, que muestra el avance dentro de un total, <meter> indica un valor dentro de un rango definido.

<meter min="0" max="100" low="30" high="70" optimum="50" value="45"></meter>

Sus atributos son:

  • min y max: Definen el rango mínimo y máximo.
  • low y high: Indican los límites para valores bajos y altos.
  • optimum: Especifica el valor óptimo dentro del rango.
  • value: Representa el valor actual.

El navegador ajustará el color de la barra según el valor actual y los atributos definidos.

Al igual que con <progress>, se pueden aplicar estilos personalizados a <meter> utilizando pseudo-elementos específicos:

meter {
  appearance: none;
  width: 100%;
  height: 20px;
  border-radius: 4px;
  background-color: #eee;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

meter::-webkit-meter-bar {
  background-color: #eee;
  border-radius: 4px;
}

meter::-webkit-meter-optimum-value {
  background-color: green;
  border-radius: 4px;
}

meter::-webkit-meter-suboptimum-value {
  background-color: orange;
  border-radius: 4px;
}

meter::-webkit-meter-even-less-good-value {
  background-color: red;
  border-radius: 4px;
}

meter::-moz-meter-bar {
  border-radius: 4px;
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background-color: green;
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background-color: orange;
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background-color: red;
}

Esto aplica colores diferentes según el valor actual del <meter>, facilitando la visualización de si el valor es óptimo, subóptimo o crítico.

Demo:⌗

See the Pen Untitled by Jorge Epuñan (@juanbrujo) on CodePen.

JavaScript:⌗

Para aplicaciones que requieren actualizaciones en tiempo real, como barras de progreso en directo o mediciones dinámicas, puedes actualizarlos dinámicamente utilizando JavaScript mediante event listeners:

function updateProgress(value) {
  document.getElementById('uploadProgress').value = value;
}

setInterval(function() {
  let currentValue = Math.min(100, document.getElementById('uploadProgress').value + 1);
  updateProgress(currentValue);
}, 1000);

Compatibilidad con navegadores:⌗

Los elementos <progress> y <meter> son compatibles con todos de los navegadores modernos. Sin embargo, la compatibilidad con pseudo-elementos para dar estilos puede variar entre navegadores.