<progress>

Introducido en HTML5

Sumario

La etiqueta HTML <progress> se utiliza para visualizar el progreso de una tarea. Aunque los detalles de como se muestran depende directamente del navegador que utiliza el cliente, aunque básicamente aparece una barra de progreso.

Content categor Flow content, phrasing content, labelable content, palpable content.
Permitted content Phrasing content, but there must be no <progress> element among its descendants.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parent elements Any element that accepts phrasing content.
DOM interface HTMLProgressElement

Atributos

Este elemento incluye Atributos Globales.

max: Este atributo indica la cantidad de trabajo que demorá la carga, se define en el elemento progress. Por ejemplo max="100".
value
: Este atributo indica que parte de la tarea ya se ha completado o cargado. Debe especificarse un valor entre 0 y max, o entre 0 y 1.0 si max está omitido. Si al atributo value no se le especifica ningún valor, se estara llevando a cabo la tarea sin que el elemento mueste funcionamiento alguno. Por ejemplo si la carga está al 50% será de 0.5 el valor, en el caso de no especificar max.

Puedes usar la propiedad CSS orient permite especificar la orientacion de la barra de progreso (horizontal o vertical) con horizontal por defecto. La pseudo-clase :indeterminate se puede utiliza para hacer que coincida con las barras de progreso indeterminadas.

Ejemplo

<progress value="70" max="100">70 %</progress>

Resultado

En Mac OS X, Se vería como esto:

En Windows, el resultante sería este:

Ejemplos adicionales

Mira orient.

Especificaciones

Especificación	Status	Comment
WHATWG HTML Living Standard The definition of '<progress>' in that specification.	Living Standard
HTML5 The definition of '<progress>' in that specification.	Candidate Recommendation

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	6.0	6.0 (6.0) [1][2]	10	11.0	5.2

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	Not supported	6.0 (6.0) [1][2]	Not supported	11.0	Not supported

Gecko notas

[1] Gecko provides the ::-moz-progress-bar pseudo-element, which lets you style the part of the interior of the progress bar representing the amount of work completed so far.

[2] Prior to Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), the <progress> element was incorrectly classified as a form element, and therefore had a form attribute. This has been fixed.