Progresso da Marca HTML
Nosso objetivo é ilustrar o progresso da tag com exemplos nesta postagem, na esperança de que isso ajude você a aprender.
Para mostrar o andamento de uma tarefa, o HTML implementa a tag <progress> .
Os desenvolvedores podem simplesmente adicionar barras de progresso aos seus sites com esta ferramenta. Na maioria das vezes, é usado para exibir o progresso durante o upload do arquivo.
Sintaxe:
<atributos de progresso…> </progress>
Uma barra de progresso pode ser mostrada por:
Example:
Aqui está outro exemplo da tag de progresso:
Example:
Estilo da barra de progresso
A tag de progresso pode ser estilizada com código CSS.
Example:
Marcar uso de progresso
O Tag progress <progress> indica o progresso de ponta a ponta de uma tarefa.
Usos Comuns
Aqui estão alguns casos de uso comuns para a tag <progress> :
- A tag <progress> pode ser usada para exibir o progresso de um upload de arquivo, permitindo que o usuário veja quanto do arquivo foi carregado e quanto resta.
- A tag <progress> pode ser usada para exibir o progresso de um envio de formulário, permitindo que o usuário veja o andamento do processo e quanto tempo levará.
- A tag <progress> pode ser usada para exibir o andamento do download de um arquivo, permitindo que o usuário veja quanto do arquivo foi baixado e quanto resta.
- A tag <progress> pode ser usada para exibir o progresso da reprodução de um vídeo, permitindo que o usuário veja em que ponto está no vídeo.
- A tag <progress> pode ser usada para exibir o progresso de um nível de jogo ou outra tarefa do jogo, permitindo que o usuário veja quanto completou e quanto falta.
Compatibilidade do navegador
Conforme indicado pelos números da tabela, foi listada a primeira versão do navegador totalmente compatível com o elemento .
Elemento | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<progresso> | 8,0 | 10,0 | 16,0 | 6.0 | 11,0 |
lista de atributos
ATRIBUTO | VALOR | Visão geral |
---|---|---|
máximo | número | Descreve quanto trabalho a tarefa exigirá. Ele é definido como 1 por padrão. |
valor | número | Descreva quanto trabalho foi concluído até agora. |
eu ia | identificador | Identifica o elemento de progresso por seu identificador exclusivo. |
aula | nomes de classes | As classes CSS são atribuídas ao elemento progress. |
estilo | estilos CSS | Especifique o estilo para o elemento de progresso. |
dados-* | valor | Fornece JavaScript com dados adicionais para trabalhar. |
escondido | escondido | Define o status oculto do elemento de progresso. |
título | texto | Fornece um título que aparece como uma dica de ferramenta. |
Atributos
Global
A Tag Progress <progress> em HTML é compatível com Atributos Globais.
Evento
A Tag Progress <progress> em HTML também é compatível com Atributos de Evento .
Vantagens do progresso da tag HTML
Aqui estão algumas vantagens de usar a tag <progress> :
- A tag <progress> fornece uma representação visual do progresso, tornando mais fácil para os usuários entenderem quanto de uma tarefa foi concluído e quanto resta.
- A tag <progress> pode ser acessada por usuários com deficiência, como aqueles que usam leitores de tela, porque fornece uma descrição de texto do status do progresso.
- A tag <progress> é flexível e pode ser usada para exibir o progresso em uma ampla variedade de contextos, como downloads de arquivos, envios de formulários e outros tipos de tarefas.
- A tag <progress> é suportada por todos os navegadores e dispositivos modernos, tornando-a uma maneira confiável de exibir informações de progresso.
- Você pode personalizar a aparência da barra de progresso usando CSS para se adequar ao design do seu site ou aplicativo.
- A tag <progress> pode ser usada em conjunto com JavaScript para fornecer interatividade e funcionalidade adicional, como a capacidade de cancelar uma tarefa ou atualizar o progresso dinamicamente.