Introduced in HTML5
Resumo
O HTML progress (<progress>
) é o elemento usado para mostrar o progresso de uma tarefa. Enquanto os detalhes específicos de como ele é exibido é deixado para o desenvolvedor web, é tipicamente exibido como uma barra de progresso.
Contexto de uso
Conteúdo permitido | Phrasing content |
Tag omission | None, both, o inicio da tag e o final da tag são obrigatórios. |
Elemento pai permitido | Phrasing content, mas não deve haver descedentes no elemento progress . |
Documento normativo | HTML5, section 4.10.16 |
Atributos
Como todos os outros elementos HTML, este elemento possui os atributos globais.
-
form
-
This attribute specifies the form which the
progress
element belongs to. -
max
-
This attribute describes how much work the task indicated by the
progress
element requires. -
value
-
This attribute specifies how much of the task that has been completed. If there is no
value
attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
You can use the orient
property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The :indeterminate
pseudo-class can be used to match against indeterminate progress bars.
DOM interface
Este elemento implementa a interface HTMLProgressElement
.
Exemplos
<progress value="70" max="100">70 %</progress>
Resultado
No Google Chrome, o resultado do progress parece deste modo:
Exemplos Adicionais
Veja orient
.
Compatibilidade dos Browsers
Características | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 6.0 | 6.0 (6.0) | No | 11 | nightlies |
Características | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
Gecko notes
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.