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: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<label for="file">Downloading progress:</label>
<progress id="file" value="40" max="100"> 40% </progress>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo da tag de progresso:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<label for="file">Loading progress:</label>
<progress id="file" value="20" max="100"> 20% </progress>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilo da barra de progresso

A tag de progresso pode ser estilizada com código CSS.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head><style>
progress{
width: 250px;
height: 25px;
}
progress::-moz-progress-bar {
background: blue;
}
progress::-webkit-progress-value {
background: blue;
}
progress {
color: blue;
}
</style>
</head><body>
<h1>The Progress Bar </h1>
<label for="file">Loading progress:</label>
<progress id="file" value="50" max="100"> 50% </progress>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Marcar uso de progresso

O Tag progress <progress> indica o progresso de ponta a ponta de uma tarefa.

Conselho: certifique-se de adicionar uma tag de rótulo ao seu HTML para melhorar a acessibilidade. Adicione o progresso da tag <progress> em coordenação com o JavaScript para mostrar o progresso 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.
Importante: Usar uma tag de progresso para exibir um medidor (por exemplo, uso de espaço em disco) não é apropriado. Para exibir um medidor, adicione uma tag <meter> como substituto.

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.
Se este artigo de alguma forma ajudou você a alcançar seu objetivo de aprendizado desejado, deixe sua reação abaixo para encorajar nossos esforços ou sugerir algumas melhorias para a melhoria deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone