Etiqueta progress HTML5: Una nueva barra de progreso

La etiqueta progress HTML5 representa mediante una barra el progreso de una tarea o acción, esta tarea puede ser el de la subida de un archivo por formulario (progress bar).

Otra etiqueta parecida y con la que no nos tenemos que confundir es la meter, que representa un valor mediante una barra.

Sintaxis de la etiqueta progress HTML5

Vamos a ver su sintaxis estraída de su web oficial:

<progress value="0" max="10"></progress>

Tal y como podéis apreciar la nueva etiqueta HTML5 es muy sencilla y consta de 2 parámetros:

• value (obligatorio): Es el valor actual del elemento.
• max (obligatorio): Valor máximo o final del elemento.

Os pongo una imagen de ejemplo de la etiqueta progress HTML5:

Ejemplo de la etiqueta progress HTML5

Con este ejemplo de progress vamos a ver en funcionamiento la barra de progreso HTML5:

<progress value="0" max="50"></progress>
<progress value="15" max="50"></progress>
<progress value="34" max="50"></progress>
<progress value="50" max="50"></progress>

En el código podemos ver cómo la etiqueta progress tiene varios valores y según en que valor se encuentre la barra estará animada o no:

• En la primera barra no muestra nada ya que el value es igual a 0.
• En la segunda y tercera barra nos encontramos con que están animadas.
• La animación se para en la cuarta barra al alcanzar el valor máximo establecido.

Cómo modificar los estilos CSS de la etiqueta progress HTML5

Esta etiqueta nos ofrece unas seudo clases para modificar su apariencia mediante estilos CSS, son las siguientes:

progress
//Estilo para Safari y Chrome
progress::-webkit-progress-bar
progress::-webkit-progress-value
//estilos para Firefox
progress::-moz-progress-bar

Podemos ver en este nuevo ejemplo la barra de progreso con los nuevos estilos:

progress { background-color: #f3f3f3; border: 1px; height: 38px; width: 200px; border-radius: 9px; color: #000000;}
/* Safari Chrome */progress::-webkit-progress-bar { background-color: #f3f3f3; border-radius: 9px;}
progress::-webkit-progress-value { background: #cb5700; border-radius: 9px;}
/* firefox */progress::-moz-progress-bar { background: #cb5700; border-radius: 9px;}

Explico código CSS superior:

• Los estilos por defecto son un fondo gris, con bordes redondeados y 38×200 píxeles de dimensión.
• Defino los estilos para los navegadores Chrome y Safari con barra naranja.
• Lo mismo hago con los estilos de Firefox.

El código HTML de la barra es el siguiente:

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