Medidas e progresso: meter e progress

No desenvolvimento web, muitas vezes precisamos exibir informações visuais sobre quantidades, valores ou o andamento de uma tarefa. Para isso, o HTML5 nos oferece duas tags semânticas e nativas: <meter> e <progress>.

Essas tags fornecem uma forma padronizada e acessível de representar medidas e progresso, sem a necessidade de criar elementos complexos com divs e CSS ou JavaScript.

A tag <meter>: medindo valores dentro de um intervalo

A tag <meter> representa uma medida escalar dentro de um intervalo conhecido. Pense nela como um medidor de combustível, um termômetro ou um indicador de uso de disco. Ela é usada para exibir um valor atual em relação a um valor mínimo e máximo, e pode indicar se o valor está em uma faixa "ótima", "baixa" ou "alta".

Atributos importantes:

• value (obrigatório): O valor numérico atual que está sendo medido.
• min: O valor numérico mínimo do intervalo (padrão: 0).
• max: O valor numérico máximo do intervalo (padrão: 1).
• low: O valor que define o limite inferior da faixa "baixa". Se value estiver abaixo de low, o medidor pode ser estilizado de uma forma.
• high: O valor que define o limite superior da faixa "alta". Se value estiver acima de high, o medidor pode ser estilizado de outra forma.
• optimum: O valor que é considerado o ideal ou "ótimo" dentro do intervalo. Isso pode influenciar a cor padrão do medidor em alguns navegadores.

Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Meter</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    meter {
      width: 200px;
      height: 20px;
      margin-bottom: 10px;
      vertical-align: middle;
    }
    /* Estilização básica para visualização */
    meter.uso-disco {
      /* Cores podem variar entre navegadores, mas o conceito é o mesmo */
      /* Exemplo de como o navegador pode colorir: */
      /* Se value < low, pode ser verde */
      /* Se low <= value <= high, pode ser amarelo */
      /* Se value > high, pode ser vermelho */
    }
  </style>
</head>
<body>

  <h1>Medidores de Valores</h1>

  <p>Uso de Disco: <meter value="0.7" min="0" max="1" low="0.4" high="0.8" optimum="0.5"></meter> 70%</p>
  <p>Nível de Bateria: <meter value="0.9" min="0" max="1" low="0.2" high="0.8" optimum="1"></meter> 90%</p>
  <p>Pontuação no Jogo: <meter value="75" min="0" max="100" low="30" high="80" optimum="90"></meter> 75 pontos</p>
  <p>Temperatura (ºC): <meter value="28" min="0" max="40" low="15" high="30" optimum="22"></meter> 28ºC</p>

</body>
</html>

Casos de uso:

• Indicadores de uso (disco, memória, bateria).
• Pontuações em jogos.
• Níveis de satisfação.
• Qualidade de senhas.

Importante:

• A tag <meter> não deve ser usada para indicar progresso de uma tarefa. Para isso, use <progress>.
• A aparência visual do <meter> pode variar bastante entre navegadores. Para um controle total da estilização, você precisaria de CSS específico para cada navegador ou usar JavaScript para criar um componente customizado.

A tag <progress>: indicando o andamento de uma tarefa

A tag <progress> representa o andamento de uma tarefa. Pense nela como uma barra de carregamento de um arquivo, o progresso de um download ou a conclusão de um formulário.

Atributos importantes:

• value: O valor numérico atual que indica o quanto da tarefa foi concluído.
• max: O valor numérico que representa o total da tarefa (padrão: 1). Se value e max estiverem presentes, a barra de progresso será preenchida proporcionalmente.

Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de Progress</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    progress {
      width: 300px;
      height: 25px;
      margin-bottom: 10px;
      vertical-align: middle;
    }
  </style>
</head>
<body>

  <h1>Barras de Progresso</h1>

  <p>Download do arquivo: <progress value="70" max="100"></progress> 70%</p>
  <p>Carregando dados: <progress value="0.5"></progress> 50%</p>
  <p>Progresso do formulário: <progress value="3" max="5"></progress> 3 de 5 etapas</p>

  <h2>Progresso Indeterminado (sem `value`)</h2>
  <p>Aguarde, processando... <progress></progress></p>

</body>
</html>

Progresso Indeterminado:

• Se o atributo value for omitido, a barra de progresso se torna indeterminada. Isso significa que a tarefa está em andamento, mas o total ou o percentual de conclusão é desconhecido. É útil para indicar que algo está acontecendo sem especificar o tempo.

Casos de uso:

• Barras de carregamento (arquivos, páginas, jogos).
• Progresso de downloads/uploads.
• Indicadores de conclusão de etapas (ex: formulários multi-etapas).

Importante:

• A tag <progress> não deve ser usada para indicar medidas dentro de um intervalo. Para isso, use <meter>.
• Assim como <meter>, a aparência visual do <progress> pode variar entre navegadores. Você pode estilizar com CSS, mas pode exigir seletores específicos para cada navegador.

Diferenças chave entre <meter> e <progress>

Resumindo

• <meter>:
  • Representa uma medida escalar dentro de um intervalo conhecido.
  • Atributos: value (obrigatório), min, max, low, high, optimum.
  • Usado para indicadores de uso, pontuações, níveis.
• <progress>:
  • Representa o andamento de uma tarefa.
  • Atributos: value, max.
  • Se value for omitido, torna-se uma barra de progresso indeterminada.
  • Usado para carregamentos, downloads, conclusão de etapas.

Ambas as tags são semânticas e melhoram a acessibilidade, fornecendo informações claras sobre o estado de valores ou tarefas.