W3docs
pt
Entrar

Tag HTML <progress>

A tag <progress> exibe o indicador de progresso de uma tarefa (barra de progresso). Exemplos de uso.

A tag <progress> é um dos elementos HTML5. Ela representa o progresso de conclusão de uma tarefa — quanto de uma operação (upload de arquivo, download, etapa de formulário, instalação) já foi realizado. O navegador desenha uma barra de progresso cujo preenchimento reflete o value em relação ao max.

Como <progress> descreve apenas até onde algo chegou, os valores reais geralmente mudam em tempo de execução. Você os atualiza com JavaScript (veja o exemplo dinâmico abaixo). A aparência exata do elemento varia conforme o navegador e o sistema operacional.

<progress> vs <meter>

Esses dois elementos têm aparência semelhante, mas significados diferentes — escolha pela intenção, não pela aparência:

Use <progress> quando…Use <meter> quando…
Você está mostrando o quanto uma tarefa foi concluída (ela avança em direção ao fim).Você está mostrando uma medição estática dentro de um intervalo conhecido, como uso de disco, uma pontuação ou a relevância de um resultado de pesquisa.
O valor naturalmente cresce de 0 até max ao longo do tempo.O valor está em algum ponto de uma escala fixa e não está "em progresso".

Uma regra prática: se você pode terminar, use <progress>. Se está apenas medindo um nível, use <meter>.

Sintaxe

A tag <progress> vem em pares. O conteúdo é escrito entre as tags de abertura (<progress>) e fechamento (</progress>).

Exemplo da tag HTML <progress>:

Tag HTML <progress>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="file">Loading:</label>
    <progress id="file" value="35" max="100">35%</progress>
  </body>
</html>
Experimente Você Mesmo »

Resultado

exemplo da tag progress

O texto entre as tags (35% acima) é o conteúdo de fallback: navegadores que suportam <progress> o ignoram e desenham a barra, enquanto navegadores muito antigos que não reconhecem o elemento exibem o texto. É uma boa prática mantê-lo sincronizado com o valor atual.

Acessibilidade: sempre rotule sua barra de progresso

Uma barra <progress> sem rótulo é anunciada pelos leitores de tela como uma porcentagem sem contexto — "35 por cento" não diz nada ao usuário sobre o que está carregando. Forneça um nome acessível de uma destas formas:

  • Um <label> cujo for corresponde ao id da barra (como acima). Clicar no rótulo também é uma affordance útil.
  • aria-labelledby apontando para o id de um texto visível.
  • aria-label="…" quando não há texto visível para referenciar.
<!-- Visible label referenced by the bar -->
<span id="upload-status">Uploading photos</span>
<progress aria-labelledby="upload-status" value="60" max="100">60%</progress>

<!-- No visible text? Use aria-label -->
<progress aria-label="Uploading photos" value="60" max="100">60%</progress>

Determinado vs indeterminado

Uma barra de progresso pode ser determinada ou indeterminada.

  • Determinada — você sabe o quanto a tarefa avançou, por isso fornece um value. A barra se preenche proporcionalmente (value ÷ max).
  • Indeterminada — você sabe que a tarefa está em execução, mas não quanto falta, então você omite o atributo value. O navegador exibe uma barra "de atividade" animada (uma faixa em movimento ou pulso) em vez de um preenchimento fixo.

Exemplo indeterminado

Omita o value para obter o estado indeterminado, depois defina-o assim que souber o número real:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="task">Working:</label>
    <!-- No value attribute → indeterminate (animated) -->
    <progress id="task" max="100">Working…</progress>
  </body>
</html>

Isso é ideal enquanto se aguarda uma resposta do servidor e ainda não é possível calcular uma porcentagem. Assim que puder, mude o mesmo elemento para determinado definindo value via JavaScript (progress.value = 40).

Estilizando determinado vs indeterminado

É mais fácil estilizar a barra indeterminada, pois ela não tem o atributo value — você pode selecioná-la com o seletor de negação CSS progress:not([value]).

A barra determinada é selecionada pelo seletor progress[value]. Adicione dimensões com as propriedades CSS width e height e defina appearance como none:

Estilizando barras de progresso

A forma moderna e simples: accent-color

Na maioria dos casos, você não precisa mais de prefixos de fornecedor ou pseudo-elementos. Defina a propriedade CSS accent-color e todos os navegadores modernos colorem a barra de forma consistente com uma linha:

progress {
  accent-color: #2563eb; /* color of the filled portion */
  width: 200px;
}

Recorra aos pseudo-elementos prefixados abaixo apenas quando precisar de controle total sobre a trilha, gradientes personalizados ou precisar dar suporte a mecanismos mais antigos.

WebKit/Blink (Chrome/Safari/Opera) — estilização detalhada legada

Chrome, Safari e a versão mais recente do Opera (16+) pertencem a esta categoria. A estilização da aparência do elemento <progress> pode ser feita com o uso de -webkit-appearance: progress-bar.

Defina -webkit-appearance: none; para redefinir os estilos padrão.

Exemplo de barra de progresso

progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 15px;
}

Exemplo do estado determinado da barra de progresso:

Exemplo de barra de progresso determinada:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 200px;
        height: 15px;
      }
    </style>
  </head>
  <body>
    <label for="file">Loading:</label>
    <progress id="file" value="30" max="100">30%</progress>
  </body>
</html>
Experimente Você Mesmo »

Depois disso, podem surgir problemas porque navegadores diferentes fornecem pseudo-elementos separados para estilizar a barra de progresso. Para resolver esse problema, você pode usar fallbacks.

O WebKit/Blink fornece dois pseudo-elementos:

  • ::-webkit-progress-bar, que estiliza o contêiner do elemento progress.
  • ::-webkit-progress-value, que estiliza o valor dentro da barra de progresso.

Estilize o ::-webkit-progress-bar com diferentes propriedades CSS:

Exemplo de barra de progresso

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.26) inset;
}

Estilize o ::-webkit-progress-value, que equivale à barra, com vários fundos de gradiente para diferentes propósitos. Use o prefixo -webkit- para os gradientes:

webkit-progress-value

progress[value]::-webkit-progress-value {
  background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
  border-radius: 4px;
  background-size: 20px 15px, 100% 100%, 100% 100%;
}

Exemplo da tag HTML <progress> usada com propriedades CSS:

Exemplo da tag HTML <progress> com propriedades CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        appearance: none;
        width: 200px;
        height: 15px;
      }
      progress[value]::-webkit-progress-bar {
        background-color: #cccccc;
        border-radius: 4px;
      }
      progress[value]::-webkit-progress-value {
        background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .2) 33%, rgba(0, 0, 0, .2) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #1000ff, #359900);
        border-radius: 4px;
        background-size: 20px 15px, 100% 100%, 100% 100%;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="55" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Experimente Você Mesmo »

Firefox

Ao usar appearance: none, podemos remover o bisel e o relevo padrão. No entanto, isso deixa uma pequena borda no Firefox, que pode ser removida com border: none. Isso também resolve o problema de borda no Opera 12.

Exemplo da barra <progress> no Firefox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        width: 200px;
        height: 15px;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="55" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Experimente Você Mesmo »

O Firefox fornece um único pseudo-elemento (::-moz-progress-bar) que pode ser usado para selecionar o valor da barra de progresso. Em outras palavras, não é possível estilizar o fundo do contêiner no Firefox.

Tag HTML <progress> - Firefox

progress[value]::-moz-progress-bar {
  background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)), -moz-linear-gradient( left, #ff00f7, #4e922a);
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

O Firefox não suporta os pseudo-elementos ::before ou ::after na barra de progresso e não permite animação CSS3 com keyframe nela, o que resulta em uma experiência mais limitada.

Exemplo da tag HTML <progress> para Firefox:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      progress[value]::-moz-progress-bar {
        background-image: -moz-linear-gradient( 135deg, transparent 33%, rgba(0, 0, 0, 0.1) 33%, 
                          rgba(0, 0, 0, 0.1) 66%, transparent 66%), 
                          -moz-linear-gradient( top, rgba(255, 255, 255, 0.25), 
                          rgba(0, 0, 0, 0.25)),
                          -moz-linear-gradient( left, #ff00f7, #4e922a);
        background-size: 35px 20px, 100% 100%, 100% 100%;
      }
    </style>
  </head>
  <body>
    <span>Loading:</span>
    <progress value="35" max="100" aria-label="Loading progress"></progress>
  </body>
</html>
Experimente Você Mesmo »

Atualizando uma barra de progresso com JavaScript

Como um elemento <progress> real expõe uma propriedade value, você atualiza a barra simplesmente atribuindo um número a ela — o navegador redesenha o preenchimento automaticamente. Aqui, um temporizador simula um download avançando de 0 a 100 e então para:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <label for="download">Downloading:</label>
    <progress id="download" value="0" max="100">0%</progress>
    <span id="status">0%</span>

    <script>
      var bar = document.getElementById("download");
      var status = document.getElementById("status");
      var loaded = 0;

      var timer = setInterval(function () {
        loaded += 5;
        bar.value = loaded;          // moves the bar
        status.textContent = loaded + "%";
        if (loaded >= bar.max) {
          clearInterval(timer);
        }
      }, 300);
    </script>
  </body>
</html>

Para mudar uma barra de indeterminada para determinada em tempo de execução, defina seu value assim que souber o número real (bar.value = 40). Para voltar ao estado indeterminado, remova o atributo com bar.removeAttribute("value").

Barra de progresso de rolagem (alternativa apenas com CSS)

O elemento abaixo é construído com <div>s estilizados, não com um elemento <progress> real. É um padrão comum para um indicador de progresso de rolagem de página quando se deseja controle total sobre a aparência. Se preferir um elemento semântico, você pode substituir o <div> por um <progress> e atualizar seu value no manipulador de rolagem.

Veja como criar uma barra que mostra até onde você rolou na página:

exemplo de como criar uma barra de progresso que mostra até onde você rolou na página

<!DOCTYPE html>
<html>
  <head>
    <style>
      #progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #ddd;
      }

      #progress-bar-fill {
        height: 100%;
        background-color: blue;
        width: 0%;
      }
    </style>
  </head>
  <body>
    <div id="progress-bar">
      <div id="progress-bar-fill"></div>
    </div>

    <h1>Scrollable Content</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
      facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
    </p>

    <script>
      window.addEventListener("scroll", function () {
        var progressBarFill = document.getElementById("progress-bar-fill");
        var scrollPosition = window.scrollY;
        var totalHeight = document.body.scrollHeight - window.innerHeight;
        var percentage = (scrollPosition / totalHeight) * 100;
        progressBarFill.style.width = percentage + "%";
      });
    </script>
  </body>
</html>
Experimente Você Mesmo »

Neste exemplo, temos um div com posição fixa e id de progress-bar que serve como contêiner. Dentro dele, outro div com id de progress-bar-fill serve como o preenchimento móvel. (Como este é um indicador decorativo de rolagem e não uma tarefa, um <div> simples é aceitável aqui; um <progress> real também funcionaria se você definisse seu value no mesmo manipulador.)

Usamos CSS para definir a largura e altura iniciais da barra de progresso, bem como as cores de fundo da barra de progresso e do preenchimento.

Também incluímos um event listener JavaScript que escuta o evento scroll no objeto window. Quando o usuário rola a página, calculamos a posição de rolagem e a altura total da página e, em seguida, calculamos a porcentagem da página que foi rolada. Atualizamos a propriedade width do elemento progress-bar-fill para refletir essa porcentagem, atualizando assim a barra de progresso.

Você pode copiar este código em um novo arquivo HTML e abri-lo no seu navegador web para ver como fica. À medida que você rola a página, a barra de progresso será atualizada para refletir o quanto você rolou. Você pode ajustar a altura e a cor da barra de progresso conforme suas necessidades.

Atributos

AtributoValorDescrição
maxnumberDefine o valor máximo do processo atual. O valor pode ser um número positivo maior que 0.
valuenumberDefine o tamanho da tarefa concluída. O valor pode ser um número de 0 até o número indicado no atributo max, ou um número no intervalo de 0 a 1 se o atributo max não for especificado.

A tag <progress> também suporta os Atributos Globais e os Atributos de Evento.

Prática

Prática
O que a tag HTML progress representa?
O que a tag HTML progress representa?
Was this page helpful?