Os elementos progress e meter
Mostre valores de conclusão e medição com HTML nativo.
Os elementos progress e meter é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
O elemento de progresso
O elemento <progress> representa a conclusão de uma tarefa:
<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->Progresso indeterminado
Sem um value, o progresso exibe uma animação indeterminada:
<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->
<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>Animando o progresso com JavaScript
Atualize o progresso dinamicamente:
<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>
<script>
let progress = 0;
const bar = document.getElementById('task');
const pct = document.getElementById('pct');
const interval = setInterval(() => {
progress += 10;
bar.value = progress;
pct.textContent = progress + '%';
if (progress >= 100) clearInterval(interval);
}, 500);
</script>O elemento de medição
O elemento <meter> exibe uma medição escalar dentro de um intervalo conhecido:
<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
- Disk usage
- Password strength
- Score or rating
- Fuel level
-->Atributos do medidor
O medidor possui vários atributos para definir intervalos ideais e de alerta:
<meter
min="0" <!-- minimum possible value -->
max="100" <!-- maximum possible value -->
low="30" <!-- threshold: below this = low -->
high="70" <!-- threshold: above this = high -->
optimum="50" <!-- where the optimal value lies -->
value="85"
>85/100</meter>Estados de cor do medidor
Os navegadores usam cores no medidor com base nos valores baixo/alto/ideal:
<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
10 errors <!-- green: value is in the good zone -->
</meter>
<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
55 points <!-- yellow: between low and high -->
</meter>Uso do medidor para espaço em disco
Um caso clássico de uso do medidor: uso do disco ou da memória:
<label for="disk">Disk usage:</label>
<meter
id="disk"
min="0"
max="500"
low="400"
high="450"
optimum="0"
value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>Força da senha com o medidor
Use o medidor para mostrar a força da senha:
<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>
<script>
document.getElementById('pwd').addEventListener('input', function() {
const strength = calculateStrength(this.value); // 0-4
document.getElementById('strength').value = strength;
});
</script>Estilizando o progresso e o medidor
Estilização personalizada para progresso e medidor:
/* Basic progress styling */
progress {
appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
background: #e2e8f0;
border: none;
}
progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }Acessibilidade do progresso
Adicione atributos ARIA para melhorar o suporte a leitores de tela:
<label for="upload">Upload progress</label>
<progress
id="upload"
max="100"
value="65"
aria-valuenow="65"
aria-valuemin="0"
aria-valuemax="100"
aria-label="File upload: 65% complete"
>65%</progress>Resumo: progresso versus medidor
Distinção principal:
<progress>— conclusão de uma tarefa ao longo do tempo; o valor aumenta em direção ao máximo; pode ser indeterminado<meter>— medição escalar estática; o valor já é conhecido; possui zonas de valores baixo/alto/ideal
Quando usar cada um
Guia de casos de uso:
- progresso — envio de arquivo, assistente de conclusão de formulário, bar de carregamento
- medidor — uso do disco, indicador de combustível, pontuação de crédito, nível da bateria, relevância do resultado de pesquisa
Verificação rápida
Qual elemento é apropriado para mostrar o quanto um disco rígido está cheio?
Recapitulação: progresso e medidor
Elementos essenciais de progresso e medidor:
<progress max value>— conclusão de uma tarefa; indeterminado sem value<meter min max low high optimum value>— medição estática- O navegador colore automaticamente o medidor com base na posição ideal
- Adicione aria-valuenow/min/max para oferecer suporte a leitores de tela
Perguntas Frequentes
A aula “Os elementos progress e meter” é grátis?
Sim — o texto completo de “Os elementos progress e meter” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Os elementos progress e meter”?
Mostre valores de conclusão e medição com HTML nativo. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Os elementos progress e meter”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- aside: conteúdo complementar
- figure e figcaption: uma revisão
- details e summary: componente de divulgação
- Os elementos progress e meter