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 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