Scroll Progress Indicator

Uma barra se preenche da esquerda para a direita na proporção do andamento da tarefa.

Adicione uma barra de progresso (Determinate Progress Bar) em [onde], também chamada progress bar fill ou progress indicator.
A barra deve se preencher da esquerda para a direita acompanhando o progresso real, com transições suaves entre as atualizações, e mostrar a porcentagem ao lado.
Use a semântica correta de barra de progresso com valores atual, mínimo e máximo para que leitores de tela consigam lê-la, e nunca deixe o preenchimento voltar.

Uma barra fina no topo da página avança aos poucos durante a navegação e se completa ao carregar.

Adicione uma barra de carregamento (Top Loading Bar) em [onde], também chamada page progress bar.
Uma barra fina na borda superior deve avançar rápido no início e depois cada vez mais devagar enquanto a página carrega; quando o carregamento terminar, ela deve correr até o fim e esmaecer.
Nunca deixe que ela chegue ao fim antes de o carregamento realmente terminar, e não deixe que ela cubra ou desloque o conteúdo da página.

Um arco cresce em volta de um anel para mostrar a porcentagem concluída.

Adicione um progresso circular (Progress Ring) em [onde], também chamado circular progress ou radial progress.
Começando no topo, um arco deve crescer no sentido horário ao redor do anel para mostrar a porcentagem concluída, desacelerando suavemente ao parar, enquanto o número no centro sobe junto.
Mantenha o arco e o número sincronizados, e exponha o valor com a semântica correta de barra de progresso para leitores de tela.

A rolagem se encaixa em pontos definidos, como slides ou seções.

Adicione "Scroll Snap" (também chamado de scroll snapping ou snap scrolling) em [onde].
Quando a rolagem parar, a tela deve se encaixar certinho na seção mais próxima, para que cada uma fique alinhada à borda em vez de parar no meio.
Use o encaixe nativo do navegador para que a rolagem por roda do mouse, toque e teclado continue funcionando, e garanta que conteúdos mais altos que a tela possam ser lidos por inteiro.

O progresso da animação fica ligado diretamente à posição de rolagem, então rolar para a frente ou para trás a reproduz ou a rebobina.

Adicione uma "Scroll-Linked Animation" (também chamada de scroll-driven animation ou scroll scrub) em [onde].
A animação deve acompanhar exatamente a posição de rolagem: rolar para baixo a faz avançar e rolar para cima a rebobina na hora, sem easing próprio baseado em tempo.
Mapeie a animação inteira para um trecho de rolagem bem definido e mostre um estado estático adequado se o usuário preferir movimento reduzido (prefers-reduced-motion).

Uma animação é reproduzida uma vez quando um elemento entra ou sai da viewport.

Adicione uma "Scroll-Triggered Animation" (também chamada de reveal on scroll ou animate on scroll) em [onde].
Cada item deve aparecer com fade e subir até o lugar uma única vez ao entrar na tela, no próprio ritmo rápido e suave, em vez de acompanhar a posição de rolagem.
Mantenha o conteúdo visível se os scripts não carregarem e mostre os itens na hora se o usuário preferir movimento reduzido (prefers-reduced-motion).