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:

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

Índice-

Progresso da tag HTML:

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.

Progresso da Marca HTML

Sintaxe:

Example:

Example:

Estilo da barra de progresso

Example:

Marcar uso de progresso

Usos Comuns

Compatibilidade do navegador

lista de atributos

Atributos

Global

Evento

Vantagens do progresso da tag HTML

Sentindo entediado?