El elemento <progress> muestra una barra de progreso de una operación, como puede ser la transferencia de un archivo, una descarga o una conversión de formato. Este elemento tiene el aspecto de un contenedor alargado que se va llenando de color azul de izquierda a derecha según avanza el progreso.
Este elemento permite elementos de línea entre sus dos etiquetas de apertura y cierre: <progress> y </progress>. No obstante, no permite otros elementos <progress>, como es lógico. Lo correcto es describir el progreso para cuando el navegador web no tenga soporte de este elemento.
Una barra de progreso se puede representar de dos maneras. La más habitual es mostrar una posición de progreso dentro de una barra que representa la totalidad o completitud de algo. Pero también se puede mostrar como indeterminado, es decir, que la operación se está llevando a cabo y falta información.
No se debe confundir el elemento <progress> con el elemento <meter>, ya que la finalidad del primero es medir la completitud de una tarea mientras que el uso del segundo es representar una medida dentro de un rango. Se trata de dos usos semánticos diferenciados.
El progreso se mide entre el valor 0 y el valor que esté especificado en el atributo max. Por su parte, el valor que se quiera representar se introduce mediante el atributo value. Un ejemplo práctico sería mostrar una barra de progreso con el valor 25 sobre 100, es decir, un 25% de progreso.
Ejemplo de código HTML con una barra de progreso:
<p>Porcentaje:
<progress value="25" max="100">25%</progress>
</p>
Se verá de la siguiente manera:
Porcentaje:
Si por el contrario se quiere mostrar una barra de progreso cuya posición es indeterminada, el resultado se consigue omitiendo el atributo value. La ausencia de este atributo indicará al navegador web que el proceso está siendo llevado a cabo pero que se desconoce su estado de completitud.
Ejemplo de código HTML con una barra de progreso indeterminada:
<p>Progreso:
<progress max="100">Indeterminado</progress>
</p>
Se verá de la siguiente manera:
Progreso:
Tal y como se puede ver en el último ejemplo, la barra de progreso no tiene una parte pintada que se llenándose de izquierda a derecha, sino una parte pintada que se desplaza de izquierda a derecha y viceversa.
Los atributos de <progress>
El elemento <progress> tiene únicamente dos atributos específicos: max y value, que ya han sido mencionados en este artículo. Además, también puede hacer uso de todos los elementos globales.
El atributo ‘value’
El atributo value es el que se usa para indicar el nivel de progreso de la tarea. El valor debe estar comprendido entre 0 y el valor especificado en el atributo max. En caso de que este atributo esté ausente se estará indicando que se trata de una barra de progreso cuya completitud se desconoce.
El atributo ‘max’
El atributo max permite indicar el valor máximo (límite) para el atributo value. Por defecto, su valor es 1. Su valor debe ser mayor que 0 en caso de estar presente. Si se quiere se puede usar decimales separados por un punto. Esto significa que pueden expresarse porcentajes en tanto por uno.
