
El elemento html progress representa el progreso de completar una tarea y generalmente se muestra como una barra de progreso. Ejemplo de una barra de progreso que muestra un 80% de finalización de la tarea:
< progress value = "80" max = "100" > 80% </ progress >
Etiqueta html progress
Clasificaciones de contenido | Un elemento organizativo, un elemento ordinario. |
---|---|
Contenido permitido | Contenido normal, pero es posible que el elemento <progress> no esté incluido en él. |
Acrónimo | Las etiquetas de inicio o finalización no se pueden omitir. |
Elementos del padre | Cualquier elemento que acepte contenido normal. |
Interfaz DOMO | HTMLProgressElement |
Características
En este elemento html progress se pueden utilizar propiedades globales. Este elemento se agregó por primera vez a HTML5 y no estaba presente anteriormente en HTML 4.
max
Esta propiedad describe cuánto trabajo total representa el elemento <progress>
. Este valor debe ser mayor que la página y puede ser un decimal. El valor predeterminado es 1
.
value
Esta propiedad especifica cuánto se ha completado la tarea. El valor de esta propiedad debe ser un decimal entre el 0
valor de la propiedad max
, o entre 0
y 1
si no se especifica ningún valor de propiedad max
.
Si no se utiliza la propiedad, value
esto indica que se desconoce el progreso, lo que significa que la tarea está en progreso, pero no se sabe cuánto tardará ni cuánto se espera que termine.
Se puede usar como se especifica en el indeterminate
: CSS para determinar que las barras de progreso son de estado desconocido y cambiar el estado de la barra de desplazamiento a desconocido después de dar el valor del valor de la propiedad, la propiedad debe eliminarse usando element.removeAttribute("value")
.
Formato predeterminado
El formato del elemento <progress>
varía entre navegadores. La mayoría de los navegadores de ajustar el valor de la propiedad display
a inline-block
, y la propiedad height
de 1em
donde los valores width
a 10em
, en adición a establecer la propiedad vertical-align
a -0.2em
. En cuanto a la función, los box-sizing
navegadores difieren en su valor:
progress { display: inline-block; height: 1em; width: 10em; vertical-align: -0.2em; box-sizing: border-box|content-box; }
Soporte de navegadores
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
6.0 | 6.0 | Soportado | 5.2 | 11,0 |
- Elemento summary en HTML
- Elemento details en HTML
- Elemento meter en HTML
- Elemento legend en HTML
- Elemento textarea en HTML
- Elemento select en HTML
- Elemento progress en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento track en HTML
- Elemento label en HTML
- Elemento input en HTML
- Elemento form en HTML
- Elemento fieldset en HTML
- Elemento datalist en HTML
- Elemento button en HTML
- Elemento tr en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tbody en HTML
- Elemento tfoot en HTML
- Elemento table en HTML
- Elemento td en HTML
- Elemento colgroup en HTML
- Elemento col en HTML
- Elemento caption en HTML
- Elemento del en HTML
- Elemento script en HTML
- Elemento noscript en HTML
- Elemento canvas en HTML
- Elemento picture en HTML
- Elemento ins en HTML
- Elemento video en HTML
- Elemento source en HTML
- Elemento param en HTML
- Elemento object en HTML
- Elemento embed en HTML
- Elemento map en HTML
- Elemento img en HTML
- Elemento audio en HTML
- Elemento area en HTML