Pular para o conteúdo
Faculdade PhorteDesign System

ScrollProgress

Em andamento

Barra fina, de 4px, que se enche no vermelho de interface conforme a página rola — do topo ao fim. Só desenho, por contrato: aria-hidden na raiz (E62).

Função
Estado e aviso
Também chamado de
progresso de leitura, barra de rolagem, indicador de leitura
Mora em
app/components/atoms/ScrollProgress.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 Padrão, 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. Padrão
  2. Sem trilha

Quando usar

No topo de artigos e páginas longas de leitura, fixada por quem usa, para mostrar quanto falta.

Faça

  • Para acompanhar um painel que rola por dentro (uma gaveta, um artigo num quadro), passe o alvo: a ref da caixa (E124). Sem ele, a barra acompanha a janela.
  • Com trilha, a barra aparece já em 0%, sobre --muted; sem ela, só aparece ao rolar — o jeito da Navbar.
  • Posicione pelo consumidor (fixed top-0, por exemplo): a peça não se posiciona sozinha.
  • Use uma por página.

Evite

  • Contar com ela para informar algo a quem usa leitor de tela: é só visual.

Quando não usar. Para o progresso de uma tarefa (inscrição, carga horária), use o Progress. Em página curta, que cabe na tela, ela nem aparece.

Anatomia

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

  1. Trilha — Largura total, 4px, transparente.
  2. Preenchimento — No vermelho de interface, na largura toda, reduzido por `scaleX` à fração rolada.

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
TopoPreenchimento em 0%.
RolandoO preenchimento acompanha a rolagem por transform, com transição de 150ms (--duracao-rapida) só com movimento liberado.
FimPreenchimento em 100%.
Página sem rolagemFica em 0%.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Com `alvo`Acompanha a rolagem da caixa: 0 no topo, metade no meio, cheia no fim — testado na ficha. A caixa que muda de altura refaz a conta.
RolagemOuve o scroll da janela (passivo) e refaz a conta — rolado ÷ (altura do documento − altura da janela) — no máximo uma vez por quadro (requestAnimationFrame).
Janela ou documento mudam de tamanhoRefaz a conta no resize e quando o documento muda de altura (ResizeObserver) — uma imagem que carrega depois não deixa a barra errada.
MontagemCalcula uma vez de saída, para abrir já na posição certa.

Relacionados