Tutorial HTML5: Barras de progreso

Publicado por Monchito

Con HTML5 podemos utilizar el elemento de progreso para mostrar el avance de una tarea, como por ejemplo, la descarga de un archivo. Como siempre, habrá un demo al final del tutorial para que puedas ver funcionando el código en vivo y practicar un poco.

El elemento progress está soportado por la mayoría de navegadores modernos y en Safari a partir de la versión 6.0, Android Browser 4.4 y parcialmente desde Internet Explorer 10.

<progress></progress>

La barra de progreso tiene básicamente dos estados; determinado e indeterminado. La apariencia de la barra va a depender de la versión del navegador y el sistema operativo que utilices.

barras-indeterminado — Estado indeterminado en Chrome y Firefox bajo Linux respectivamente.

Vamos a comenzar cambiando el estado de la barra de indeterminado a determinado.

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

Sin tan siquiera aplicar algo de CSS podemos ver como cambia la apariencia de la barra en Chrome y Firefox.

Los atributos max y value representan la cantidad total de trabajo que requiere la tarea y que tanto de la tarea ha sido completada, respectivamente.

Ahora podemos utilizar progress[value] para darle algo de estilo a nuestra barra. En nuestra hoja de estilos comenzaremos definiendo el ancho y el alto.

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

A partir de aquí es que comienza a complicarse un poco las cosas, ya que cada navegador utiliza sus propias pseudo-clases para definir el estilo que tendrá la barra de progreso. Podemos clasificarlos en tres grandes grupos:

Webkit/Blink (Chrome/Safari/Opera)
Gecko (Firefox)
Trident (Internet Explorer)

Webkit/Blink (Chrome/Safari/Opera)

Lo primero que tenemos que hacer es reinicializar la barra de vuelta a su estilo predeterminado.

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

  /* Reinicializar estilos */

  appearance: none;
  -webkit-appearance: none;

}

Luego utilizamos las pseudo-clases -webkit-progress-bar y -webkit-progress-value para darle estilo a la barra.

-webkit-progress-bar: para definir el estilo del contenedor, o sea, de toda la barra en su conjunto.
-webkit-progress-value: para definir el estilo del valor o avance de la barra. De forma predeterminada tiene un color de fondo verde, a cómo se puede ver en la tercera imagen.

Aplicaremos a la barra un color amarillo dorado de fondo…

progress[value]::-webkit-progress-bar {
  background-color: gold;
}

…y un rojo oscuro para la barra de valores…

progress[value]::-webkit-progress-value {
  background-color: darkred;
}

…lo que nos da esto como resultado:

Gecko (Firefox)

Al igual que hicimos con Chrome, debemos reinicializar la barra. Esta vez con -moz-appearance. En Firefox (y Opera 12) esto nos deja con un borde alrededor de la barra, lo cual solucionamos con un simple border: none.

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

  /* Reinicializar estilos */

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Quitar borde en Firefox */

  border: none;

}

En Gecko/Firefox se utiliza la pseudo-clase -moz-progress-bar para darle formato al elemento de progreso, pero no para el contenedor.

progress[value]::-moz-progress-bar {
  background-color: darkred;
}

Para definir el estilo del contenedor podemos asignarle una clase a la barra y aplicarle un color de fondo a la misma.

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

.barra {
  background-color: gold;
}

Trident (Internet Explorer)

Solo Internet Explorer 10 y versiones superiores soportan de forma parcial las barras de progreso en HTML5. IE permite únicamente cambiar el estilo de la barra de valores con el atributo color.

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

  /* Reinicializar estilos */

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Quitar borde en Firefox */

  border: none;

  /* Estilo para IE10 */

  color: darkred;
}

Y hasta aquí ésta breve introducción de barras de progreso en HTML5. La demostración en vivo contiene más ejemplos, incluyendo patrones de fondo y barras animadas. Por el momento, esto último solo funciona en navegadores Chrome.

En una segunda entrega aprenderemos como actualizar la barra de progreso utilizando algo de JavaScript. ¡Hasta entonces!