Carregando...

Html progress

Postado: 12 de junho de 2022 Tempo de Leitura: < 1 Minuto

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!


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

Publicado por: Loop Nerd

300 Visualizações

8 respostas para “Html progress”

  1. Na7 disse:

    Great article! I was looking for some HTML codes to help me with my website and this post was super helpful. The examples were clear and easy to follow, thanks for sharing!

  2. real cricket 24 disse:

    Muito útil essa lista de códigos prontos! Eu as utilizarei para praticar o HTML e criar meus próprios projetos.

  3. MichaelAdoft disse:

    iStore este un portal catre viitor, o lume a actualitatii si a calitatii garantate. iStore este un concept despre unicitate si experienta uimitoare de cumparaturi. Aici, fiecare cumparator este vazut ca o personalitate ce merita tot ce e mai bun, de aceea, ne straduim sa oferim informatii transparente si preturi accesibile.

  4. betenfam disse:

    thank you very much

  5. check camera shutter count disse:

    Great post! I’m glad to see a clear explanation of HTML progress and the codes provided are very helpful. As a beginner, I find it easier to understand and implement the codes directly from the post. Thanks for sharing!

  6. TechyList disse:

    I love this blog! Keep up the good work!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados