Sumari
L'Element HTML <progress>
s'utilitza per veure l'avenç de realització d'una tasca. Encara que els detalls de com es visualitza es deixa en mans del desenvolupador del navegador, normalment es mostra com una barra de progrés. Es pot utilitzar Javascript per manipular el valor de la barra de progrés.
Categories de contingut | Contingut dinàmic, phrasing content, contingut etiquetable, contingut palpable. |
---|---|
Contingut permès | Phrasing content, però no ha d'haver cap element <progress> entre els seus descendents. |
Omissió de l'etiqueta | Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries |
Elements pares permesos | Qualsevol element que accepti phrasing content. |
Interfície DOM | HTMLProgressElement |
Atributs
Aquest element inclou els atributs globals.
max
- Aquest atribut descriu la quantitat de treball que requereix la tasca indicada per l'element
progress
. L'atributmax
, si està present, ha de tenir un valor més gran que zero i ser un nombre de coma flotant vàli value
- Aquest atribut especifica quina part de la tasca s'ha completat. Ha de ser un nombre de coma flotant vàlid entre 0 i
max
, o entre 0 i 1 si s'ometmax
. Si no hi ha cap atributvalue
, la barra de progrés és indeterminada; això indica que una activitat està en curs sense cap indicació de quant temps s'espera que prengui.
Es pot utilitzar la propietat -moz-orient
per especificar si la barra de progrés es presentarà horitzontalment (per defecte) o verticalment. La pseudo-classe :indeterminate
es pot utilitzar per a que coincideixi amb barres de progrés indeterminades.
Exemples
<progress value="70" max="100">70 %</progress>
Resultat
A Mac OS X, el resultat del progress s'assembla a això:
A Windows 7, el resultat del progress s'assembla a això:
Exemples addicionals
Veure -moz-orient
.
Especificacions
Especificació | Estat | Comentari |
---|---|---|
HTML Living Standard The definition of '<progress>' in that specification. |
Living Standard | |
HTML5 The definition of '<progress>' in that specification. |
Recommendation | Definició inicial |
Navegadors compatibles
Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Suport bàsic | 6.0 | 6.0 (6.0) [1] [2] 14.0 (14.0) [2] |
10 | 11.0 | 5.2 |
Característica | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Suport bàsic | (Yes) | 6.0 (6.0) [1] [2] 14.0 (14.0) [2] |
No support | 11.0 | 7 [3] |
[1] Abans de Gecko 14,0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11), l'element <progrés> va ser classificat erròniament com un element de formulari, i per tant tenia una atribut form
. Això s'ha solucionat.
[2] Gecko proporciona el pseudo-element ::-moz-progress-bar
, que permet que l'estil de la part interior de la barra de progrés representi la quantitat de treball realitzat fins al moment.
[3] Safari en iOS no és compatible amb les barres de progrés indeterminades (es representen com barres de progrés completades en 0%).