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.
Tabla de contenidos
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.
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:
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.