HTML progress: exibir o avanço e alternar para o estado indeterminado

HTML <progress> mostra quanto de uma tarefa foi concluído. Defina value e max para progresso determinado ou omita o atributo value quando o trabalho total for desconhecido. O elemento não mede uploads ou downloads automaticamente.

Calcule o progresso com valor e máximo

value é a quantidade concluída e max é a quantidade total. Um valor de 20 com max 100 significa 20%; com max 200 significa 10%. Quando max é omitido, seu valor padrão é 1, então 20% é escrito como value="0.2". Use um número válido maior que zero para max e um valor entre zero e max.

O mínimo é sempre zero; progress não usa um atributo min. Considere usar meter para uma medição dentro de um intervalo, como uso de armazenamento ou uma pontuação. Use progress para a conclusão de uma tarefa em andamento.

Exemplo completo: atualizar o progresso e alternar para indeterminado

Salve este código como progress-demo.html e abra-o em um navegador. Os botões apenas mudam os valores exibidos para prática; eles não transferem arquivos.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Progresso e estado indeterminado</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    progress { display: block; width: 100%; height: 1.5rem; }
    button { margin: 0.25rem; font: inherit; }
  </style>
</head>
<body>
  <h1>Prática de progresso</h1>
  <label for="work">Progresso da tarefa de exemplo</label>
  <progress id="work" value="20" max="100">20%</progress>
  <p id="status" aria-live="polite">20% concluído</p>
  <button type="button" id="advance">Alterar para 80%</button>
  <button type="button" id="unknown">Total desconhecido</button>
  <button type="button" id="reset">Redefinir</button>
  <script>
    const bar = document.getElementById('work');
    const status = document.getElementById('status');
    function show(value) {
      if (value === null) {
        bar.removeAttribute('value');
        bar.textContent = 'Em andamento';
        status.textContent = 'Em andamento: a quantidade total de trabalho é desconhecida.';
      } else {
        bar.value = value;
        bar.textContent = value + '%';
        status.textContent = value + '% concluído';
      }
    }
    document.getElementById('advance').addEventListener('click', () => show(80));
    document.getElementById('unknown').addEventListener('click', () => show(null));
    document.getElementById('reset').addEventListener('click', () => show(20));
  </script>
</body>
</html>

1. O estado inicial está 20% completo. Clique em Alterar para 80% para alterar tanto a barra quanto sua descrição para 80%.
2. Clique em Total desconhecido para remover o atributo value. O navegador mostra progresso indeterminado junto com uma frase explicando que o total é desconhecido.
3. Clique em Redefinir para restaurar o atributo value e retornar a 20%.

value="0" é progresso determinado sem nenhum trabalho concluído; não é indeterminado. Para alternar um elemento de progresso existente para indeterminado, remova o atributo, como o exemplo faz. A aparência e a animação do progresso indeterminado podem variar dependendo do navegador, sistema operacional e configurações do usuário.

Forneça um nome de tarefa e uma frase de status

O texto “20%” dentro da barra de progresso é um texto reserva para navegadores mais antigos, não um substituto para o nome da tarefa. Associe um rótulo usando valores for e id correspondentes, ou forneça um nome acessível ARIA apropriado, para identificar a tarefa. Mostre o estado atual em palavras, assim como através da cor e do comprimento da barra.

Para tarefas reais, atualize o valor a partir das informações fornecidas por um servidor ou eventos de transferência. Preencher uma barra com um temporizador não estabelece que o trabalho está concluído. Projete mensagens e ações separadas para erros, cancelamento e conclusão, e controle a frequência dos anúncios para que as atualizações de status não se repitam excessivamente. A referência de progresso MDN explica a sintaxe e os requisitos de acessibilidade.