English
EspañolBarra de progresso de leitura
Escolha a cor e a altura. Nos navegadores novos a barra anda só com CSS, sem JavaScript; nos outros, um script pequeno faz o mesmo.
Quanto do texto já foi lido
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Barra de progresso de leitura: para que serve
A barra de progresso de leitura é a linha fina no topo que vai se enchendo conforme a pessoa lê o artigo, mostrando quanto falta.
O código usa as animações ligadas à rolagem do CSS (animation-timeline: scroll()), que fazem a barra andar sem JavaScript nos navegadores que suportam, como Chrome e Edge 115 ou mais novos e Safari 26, e um script leve com requestAnimationFrame como reserva para os outros. Escolha a cor ou um degradê, a altura e se fica no topo ou no rodapé.
Como usar
- Escolha a cor, a altura e a posição.
- Role a prévia para ver funcionando.
- Copie o código e cole na página do artigo.
Quando usar
- Blog e artigos longos.
- Receitas e tutoriais.
- Páginas de documentação.
Perguntas frequentes
Como funciona só com CSS?
Com as animações ligadas à rolagem (animation-timeline: scroll()), a barra cresce conforme a página rola, sem nenhum script e sem pesar a rolagem. O Chrome e o Edge suportam desde a versão 115 e o Safari desde a 26; nos demais, o código usa o JavaScript de reserva.
Onde vale a pena usar?
Em artigos longos, receitas e guias, onde saber quanto falta ajuda a continuar lendo. Em páginas curtas, a barra quase não se move e não acrescenta nada.
A barra é lida pelo leitor de tela?
Não: ela é decorativa e fica com aria-hidden, para não ser anunciada a cada rolagem. Quem usa leitor de tela já tem outras formas de saber a posição no texto.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.