Elemento progress

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento progress representa el estado de progreso de una operación, como ser la transferencia de un archivo, una codificación o la recuperación de valores desde una base de datos. Este control es normalmente representado por una barra de progreso, compuesta por un contenedor que es llenado de izquierda a derecha de acuerdo con el progreso de la operación.

Una barra progress puede representar un progreso en dos estados: como indeterminado, indicando que el proceso está siendo llevado a cabo pero no existe información acerca de su estado de completitud; o como un valor que indica la cantidad de trabajo que ha sido realizado en la tarea.

Los autores no deben confundir este elemento con meter. A diferencia de meter, el elemento progress mide únicamente la completitud de una tarea.

El progreso en un control progress es medido entre 0 y el valor del atributo max. Si este atributo no está definido, toma el valor por defecto de 1.

El soporte provisto por los navegadores para el elemento progress es incompleto. Los autores pueden tener que recurrir a programas para lograr los mismos efectos consistentemente.

Ejemplos

En nuestro primer ejemplo, mostraremos un solo control progress con un valor de 20 sobre 100. Para tal propóstio, estableceremos el atributo max con un valor de 100, representando el número de pasos involucrados en la tarea. Lo que podemos deducir de este control (o más precisamente, lo que representa) es que hay un proceso de algún tipo ejecutándose que ha sido completado en un 20%.

<p>Progreso: <progress max="100" value="20"></progress></p>

Progreso:

Nuestro segundo ejemplo simplemente agrega algo de contenido a la barra progress. Este contenido será mostrado en aquellos navegadores que no soportan al elemento, haciendo su uso más compatible con navegadores antiguos.

<p>Progreso de la subida: <progress max="68" value="47">47/68</progress></p>

Progreso de la subida: 47/68

En el siguiente ejemplo, crearemos un control progress sin el atributo value. Esto indicará a los usuarios que un proceso está siendo llevado a cabo pero su estado de completitud es desconocido.

<p>Progreso de la recuperación del archivo: <progress></progress></p>

Progreso de la recuperación del archivo:

Finalmente implementaremos una barra progress más dinámica. Para este ejemplo, agregaremos un programa que emulará la tranferencia de un archivo, mostrando su progreso. Para que el programa acceda correctamente al elemento progress a fin de reflejar los cambios, un id debe ser provisto en éste.

Nota: el programa que actúa en este ejemplo ha sido definido en otro lugar y su implementación queda fuera del enfoque de este sitio web. Sólo su nombre es llamado en el atributo onclick.

<p>
  <input type="button" value="Transferir archivo" onclick="progresoTransferenciaArchivo()">
  Progreso: <progress id="transferenciaarchivo" value="0"></progress>
</p>

Progreso:

Atributos

Atributos específicos

value

Un valor numérico que indica el nivel de progreso de la tarea. Este valor será asignado al elemento cuando la página sea cargada. Si este atributo está ausente, el elemento indica que se está llevando a cabo un proceso pero su estado de completitud es desconocido.

Este atributo debe contener un número entre 0 y el valor del atributo max. Cuando el atributo max está ausente, el valor 1 debe ser considerado como el límite superior.

Ejemplo

<p>Progreso: <progress value="0.67"></progress></p>

Progreso:

max

La cantidad total de trabajo que tomará completar la tarea. Este valor establece el límite máximo para el atributo value.

Cuando este atributo no está presente en el control, el límite superior para la barra progress toma automáticamente el valor predeterminado de 1.

Ejemplo

<p>Progreso: <progress value="18" max="20"></progress></p>

Progreso:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.