DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
30-12-2013

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:

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)

Estilos de la etiqueta (tag) progress

Pseudo clasesDescripción
-webkit-progress-bar / -moz-progress-barDefine un estilo para el contenedor del tag progress.
-webkit-progress-valueDefine 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í.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Sistema de particulas con Canvas

Sistema de particulas con Canvas

Flat Module con puro CSS

Flat Module con puro CSS

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Algunos artículos que te pueden interesar

El elemento Progress Bar HTML5

El elemento Progress Bar HTML5

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

Andrés Cruz 30-12-2013

Animando los SVG con CSS

Animando los SVG con CSS

En esta entrada veremos cómo emplear las animaciones con los SVGs, específicamente emplearemos el logo de Android con el cual hemos trabajado desde entradas pasadas.

Andrés Cruz 15-06-2015

Comenzando con Adobe PhoneGap en Windows y Android

Comenzando con Adobe PhoneGap en Windows y Android

Se explica como instalar Adobe PhoneGap en Windows y Android además de crear un proyecto y configurarlo en la aplicación móvil.

Andrés Cruz 27-01-2017