Cómo crear barras de progreso con HTML5

Para crear una barra de progreso en HTML5 usa el elemento <progress> con los atributos max (cantidad máxima, por defecto 1.0) y value (progreso actual). Para estilarla aplica reglas CSS específicas por navegador (-webkit-appearance: none, progress::-moz-progress-bar y progress::-webkit-progress-value) ya que cada motor renderiza con sus propios pseudo-elementos.

El lenguaje HTML5 incluye un elemento nuevo llamado <progress> que nos permite representar el progreso o avance de una tarea. Es muy similar al elemento <meter>.

Sintaxis básica

Podemos incluirlo en el código de nuestra Web así:

<progress></progress>

Atributos

Aparte de los atributos generales, la barra de progreso puede tener los siguientes atributos:

Atributo	Descripción	Valor por defecto
max	Cantidad máxima de la barra	1.0
value	Cantidad de progreso actual (entre 0.0 y max)	-

Ejemplo

El siguiente código generaría la barra de progreso de abajo:

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

Aplicando estilos

Podemos aplicar estilos vía CSS utilizando el selector progress[value]. En el siguiente código indicamos que la barra tenga una anchura de 250 pixels y una altura de 20 pixels:

progress[value] {
  width: 250px;
  height: 20px;
}

Compatibilidad cross-browser

Cada grupo de navegadores cuenta con unas reglas CSS específicas, por lo que tenemos que indicarlas en nuestro CSS. Una regla de estilos a prueba de errores de compatibilidad sería así:

progress[value] {
  /* Eliminamos la apariencia por defecto */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Quitamos el borde que aparece en Firefox */
  border: none;
  /* Aplicamos las dimensiones */
  width: 250px;
  height: 20px;
  /* Aplicamos color a la barra */
  color: blue;
}

/* Compatibilidad de color en Firefox */
progress::-moz-progress-bar {
  background: #0063a6;
}

/* Compatibilidad de color en Chrome / WebKit */
progress::-webkit-progress-value {
  background: #0063a6;
}

Preguntas frecuentes

¿Cuál es la diferencia entre <progress> y <meter>?

<progress> representa el avance de una tarea en curso (por ejemplo, una descarga al 60%). <meter> representa una medida estática dentro de un rango conocido (por ejemplo, espacio de disco usado). Aunque visualmente son parecidos, semánticamente son distintos.

¿Por qué necesito reglas CSS distintas para Firefox y Chrome?

Porque cada motor renderiza la barra de progreso con sus propios pseudo-elementos. Firefox usa ::-moz-progress-bar y Chrome/Safari usan ::-webkit-progress-value. Si solo aplicas estilo al elemento <progress> sin estos pseudo-elementos, el color de relleno no cambia en algunos navegadores.

¿Qué valor tiene max por defecto si no lo especifico?

1.0. Eso significa que si no defines max y pones value="0.5", la barra estará a la mitad. Para trabajar con porcentajes es más cómodo poner max="100" y usar value como número entero.

¿Por qué hay que poner -webkit-appearance: none?

Para resetear la apariencia nativa que aplica el navegador y poder definir tus propios estilos. Sin ese reset, los estilos personalizados quedan ignorados o se mezclan con la apariencia por defecto del sistema.

Conclusiones clave

• <progress> representa una tarea en curso; <meter> representa una medida estática.
• max define el total y value el progreso actual; sin atributos, el valor va de 0 a 1.0.
• Para estilarlo necesitas resetear appearance y aplicar pseudo-elementos específicos por navegador.
• Firefox usa ::-moz-progress-bar; Chrome y Safari usan ::-webkit-progress-value.