Pular para o conteúdo
Faculdade PhorteDesign System

Progress

Em andamento

Barra de progresso de uma tarefa ou etapa — preenchida até o valor, com rótulo e porcentagem opcionais —, em três alturas e cinco cores. É um role="progressbar" com valor mínimo, máximo e atual; sem value, é indeterminada, para espera sem fim conhecido (E62).

Função
Estado e aviso
Também chamado de
barra de progresso, progresso, andamento
Mora em
app/components/atoms/Progress.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Interativo, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Interativo
  2. Variantes
  3. Indeterminado

Quando usar

Para mostrar quanto de uma coisa com fim conhecido já foi feito: etapas da inscrição, carga horária cumprida, vagas preenchidas.

Faça

  • Dê um label: é o nome da barra para o leitor ("Carga horária cumprida").
  • Use showValue quando o número importa.
  • Escolha a cor pelo significado: warning para prazo perto do fim, success para concluído.
  • Diga de quê é o progresso: "Carga horária concluída", não "Progresso". Na determinada, a porcentagem; na indeterminada, o gerúndio com reticências: "Enviando o comprovante…" (E62).
  • Use min quando a faixa não começa em zero: 70 de 20 a 120 é 50%.

Evite

  • Barra sem label nem aria-label: o leitor anuncia "barra de progresso" sem dizer do quê.
  • Valor fora da faixa esperando que apareça: o componente prende entre 0 e max.

Quando não usar. Para quanto da página já foi lido, use o ScrollProgress. Para um valor que a pessoa escolhe, o Slider. Para a espera de um clique ("Enviando…" no próprio botão), o isLoading do Button.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Rótulo — O `label` à esquerda, em `text-sm`.
  2. Valor — Porcentagem à direita, com `showValue`.
  3. Trilha — Borda `--border-interactive` sobre `--card`, cantos redondos.
  4. Preenchimento — Na cor da variante, até a porcentagem.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
Tamanhosm 6px, md 10px (padrão), lg 16px de altura.
Corprimary (padrão), info, success, warning ou destructive no preenchimento.
Mudança de valorO preenchimento anima a largura em 500ms.
IndeterminadoSem value: um trecho de 40% corre pela trilha em 1,4s, sem porcentagem. Com movimento reduzido, não corre — a trilha fica cheia e esmaecida, para não parecer parada em 40% (E62).

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Valor abaixo de `min` ou acima de `max`É preso entre min (padrão 0) e max.
Sem `value`Indeterminada: sem aria-valuenow, com aria-busy="true", e o showValue não aparece — conferido no teste da ficha.
PorcentagemArredondada para inteiro (Math.round).

Relacionados