El elemento Progress Bar HTML5

30-12-2013 - Andrés Cruz

La función del elemento o etiqueta (tag) progress es la de indicar el estado de terminación de una tarea.

Su sintaxis es la siguiente:

<progress></progress>

Vemos que, como la mayoría de las etiquetas en HTML, presenta una etiqueta de inicio <progress> y otra de cierre </progress>.

Atributos de la etiqueta (tag) progress

Aparte de los atributos globales para todas las etiquetas (class, id, etc) y a diferencia de la etiqueta <meter>, solo posee dos atributos segun la W3C:

value: Especifíca cuanto de la tarea ha sido completada; mas especifico; es un valor punto flotante que representa el valor actual de la tarea. Este valor debe de estar entre 0.0 y el valor de max, o 1.0 si el atributo max no está presente.
max: Especifíca cuanto de esta tarea se requiere en total. En otras palabras Indica un valor que representa el máximo de la tarea; y por lo tanto el valor máximo posible para el atributo value; este valor debe ser más grande que 0.0, si no se especifica por defecto es 1.0.

Estados de la etiqueta progress bar

La etiqueta progress bar, puede estar en dos estados: determinado e indeterminado.

Estado: Determinado de la Progress Bar

Para que la barra de progreso se encuentre en el estado "determinado", debe de estar presente el atributo value.

<progress value="0.5"></progress>

Estado: Indeterminado de la Progress Bar

Para que la barra de progreso se encuentre en el estado "Indeterminado", no debe de estar presente el atributo value; o simplemente remover este atributo.

El porqué de este estado; imaginemos que tenemos un tag progress bar en nuestra página y perdemos la conexión con el host; nuestro código JavaScript debería de detectar este posible estado y remover el atributo value, para indicarle al usuario que hubo un problema con la conexión.

<progress></progress>

Reglas en general para la de la Progress Bar (resumen)

Todos los atributos mencionados anteriormente son números punto flotantes mayores a 0.0.
El atributo max debe ser mayor a 0.0.
Segun las definiciones de cada atributo, las siguientes expresiones son verdaderas:

0.0 <= value <= 1.0 (si max no se especifica).
0.0 <= value <= max (si max se especifica).

Estilos de la etiqueta (tag) progress

Pseudo clases	Descripción
`-webkit-progress-bar / -moz-progress-bar`	Define un estilo para el contenedor del tag progress.
`-webkit-progress-value`	Define un estilo para el valor del tag progress.

Ejemplo 1

Este primer experimento muestra el primer caso presentado en la sección de "reglas generales"; en la que el atributo : max no se encuentra presente.

Además de esto, usaremos un script para variar el valor del tag progress en un tiempo determinado y apreciar su comportamiento en el tiempo.

Como podemos apreciar; al no estar presente el atributo max; este toma su valor por defecto; es decir; 1.0.

	<progress id="progress1" value="0" ></progress>

Para ver el código completo del experimento, has clic aquí.

Ejemplo 2

Este ejemplo muestra todos los atributos presentados anteriormente; básicamente el atributo value y el atributo max.

Con ayuda del script anterior, veamos su comportamiento:

	<progress id="progress2" max="100" value="0" ></progress>

Para ver el código completo del experimento, has clic aquí.

Ejemplo 3

Podemos personalizar el tag progress de diversas maneras; cambiando el border-radius o el background, el padding entre muchos otros.

progress {
	display:block;
	-webkit-appearance: none;
}

progress::-webkit-progress-bar {
	background: black;
	border-radius: 50px;
	padding: 2px;
}
progress::-moz-progress-bar {  
	background: black;
	border-radius: 50px;
	padding: 2px;
} 

progress::-webkit-progress-value {
	border-radius: 50px;
	background:orange;
}

Para ver el código completo del experimento, has clic aquí.

Progreso

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy