Html progress

Html progress

A tag HTML <progress> é usada para exibir o progresso de uma tarefa. Ele fornece uma maneira fácil para os desenvolvedores da Web criarem uma barra de progresso no site. É usado principalmente para mostrar o progresso de um upload de arquivo na página da web.

A tag de progresso HTML é nova no HTML5, portanto, você deve usar novos navegadores.

Atributos

A tag HTML <progress> suporta os atributos globais e de evento, bem como 2 atributos específicos.

value – Define quanto trabalho a tarefa foi concluída.

max – Define quanto trabalho a tarefa requer no total.

Veja o exemplo no código abaixo

Vamos ver o exemplo de progresso com os atributos value e max.

<label for="file">Progresso do download:</label><br>
<progress id="file" value="60" max="100"> 60% </progress>

Veja o Resultado!

Progresso do download:
60%

Dicas: 

Sempre adicione a tag <label> para melhores práticas de acessibilidade!

Use a tag <progress> em conjunto com JavaScript para exibir o andamento de uma tarefa.

Barra de progresso de estilo

Você pode estilizar a tag <progress> com CSS.

progresso{  
  largura: 260px;  
  altura: 32px;  
}  

Resultado!

Neste artigo abordamos sobre a tag Html progress.

Veja outros artigos sobre Tags HTML Lista Completa