Elemento progress en HTML

Elemento progress en html

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 contenidoUn elemento organizativo, un elemento ordinario.
Contenido permitidoContenido normal, pero es posible que el elemento <progress> no esté incluido en él.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normal.
Interfaz DOMOHTMLProgressElement

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 01 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 displayinline-block, y la propiedad height de 1em donde los valores width10em, en adición a establecer la propiedad vertical-align-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

ChromeFirefoxEdgeSafariÓpera
6.06.0Soportado5.211,0