Matricule-se
Voltar para o blog
Full Stack

Como criar uma barra de progresso HTML com CSS e JavaScript? Aprenda passo a passo!

Pedro Surreaux

Nesta aula vamos aprender a construir, olhando pro código, uma barra de progresso HTML que se atualiza conforme você rola a página.


Uma scroll progress bar é uma ótima maneira de mostrar visualmente e de um jeito moderno o quanto o usuário rolou a página, trazendo um efeito dinâmico e interativo. É um projeto simples, mas cheio de conceitos úteis de HTML, CSS e JavaScript.

Segue lendo pra aprender como se faz!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

O que é uma Scroll Progress Bar?

A scroll progress bar é uma barra que aparece (geralmente no topo da página) e aumenta sua largura conforme o usuário desce a página. Quando você chega ao final, ela atinge 100%. É perfeita para sites com conteúdo longo, como blogs ou portfólios, e funciona em qualquer tamanho de tela, ajustando-se automaticamente. Vamos ver como criar uma do zero!

Passo 1: Estrutura com HTML

O HTML é bem simples. Precisamos de um contêiner para a barra de progresso e um espaço para o conteúdo da página. Aqui está o código base:

HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Scroll Progress Bar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="progress-container">
    <div class="progress-bar" id="progress-bar"></div>
  </div>
  <div class="content">
    <h1>Scroll Progress Bar</h1>
    <div class="text">
      <!-- Texto longo com "Lorem Ipsum" para permitir rolagem -->
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>
  • progress-container: É a parte cinza que fica fixa no topo.
  • progress-bar: A barra azul que cresce conforme o scroll, com o ID progress-bar para manipulá-la no JavaScript.
  • content: O conteúdo da página, com um texto longo para garantir que haja rolagem.

Passo 2: Estilização com CSS

No CSS, estilizamos a barra para que ela fique visualmente atraente e funcional. Aqui está o código comentado:

CSS
/* Reset básico para margens */
body, h1, p {
  margin: 0;
}

/* Contêiner da barra (fundo cinza) */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #ccc;
  z-index: 1000; /* Garante que fique acima de outros elementos */
}

/* Barra de progresso (azul) */
.progress-bar {
  height: 100%;
  width: 0%; /* Começa com largura zero */
  background-color: #007bff; /* Cor azul, mas você pode mudar */
  transition: width 0.3s ease; /* Animação suave ao mudar a largura */
}

/* Estilização do conteúdo */
.content {
  padding: 20px;
  max-width: 800px;
  margin: 80px auto; /* Centraliza e dá espaço no topo */
}
  • Posicionamento fixo: O position: fixed mantém a barra no topo, mesmo com rolagem.
  • Transição suave: A propriedade transition: width 0.3s ease faz a barra crescer suavemente.
  • Centralização do conteúdo: O margin: auto e max-width: 800px deixam o texto bem alinhado.

Dica: Se você quer aprender CSS do zero de um jeito prático, leia nosso post em que te ensinamos do zero a criar uma landing page!

Ícone Full StackFull Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agoraSeta para a direita
Fundo Full StackTelas Full Stack
Luz Full Stack

Passo 3: A mágica do JavaScript

A lógica da barra de progresso está no JavaScript. Precisamos calcular o quanto o usuário rolou e atualizar a largura da barra. Aqui está o código:

JavaScript
window.addEventListener('scroll', () => {
  // Quanto foi rolado no eixo Y
  const scroll = window.scrollY;
  // Altura total do documento
  const alturaDocumento = document.documentElement.scrollHeight;
  // Altura da tela visível
  const alturaTela = window.innerHeight;
  // Altura que pode ser rolada
  const alturaScrolavel = alturaDocumento - alturaTela;
  // Percentual de rolagem
  const percentualScroll = (scroll / alturaScrolavel) * 100;
  
  // Atualiza a largura da barra de progresso
  const progressBar = document.getElementById('progress-bar');
  progressBar.style.width = `${percentualScroll}%`;
});

Explicando cada parte:

  1. window.addEventListener('scroll', ...): Escuta o evento de rolagem na janela.
  2. window.scrollY: Retorna quantos pixels foram rolados no eixo Y.
  3. document.documentElement.scrollHeight: A altura total do documento.
  4. window.innerHeight: A altura da tela visível.
  5. alturaScrolavel: Calcula a altura que pode ser rolada (altura total menos a altura da tela).
  6. percentualScroll: Divide o scroll atual pela altura rolável e multiplica por 100 para obter o percentual.
  7. Atualização da barra: Ajusta a propriedade width da barra com o valor em percentual.

Por que subtrair a altura da tela? Porque, ao chegar ao final da página, o scrollY não atinge o scrollHeight total, já que a última parte visível é a tela. Isso garante que a barra chegue a 100% no momento certo.

Testando e Adaptando

Com o código acima, a barra começa em 0% no topo e atinge 100% no final da página. Ela também se adapta automaticamente a diferentes tamanhos de tela, como mostrado no vídeo, onde Diego ajusta a janela e a barra continua funcionando perfeitamente. Para testar, abra o console (F12) e veja os valores de scrollY, scrollHeight e innerHeight enquanto rola.

Quer personalizar? Você pode:

  • Mudar a cor da barra no CSS (troque #007bff por outra cor);
  • Ajustar a velocidade da transição (transition: width 0.5s ease para mais lenta);
  • Usar outra função de transição, como ease-in ou ease-in-out.

Por que usar uma Scroll Progress Bar?

Além de ser visualmente atraente, a scroll progress bar melhora a experiência do usuário, especialmente em páginas longas. Ela dá uma noção clara de quanto falta para terminar o conteúdo, incentivando a navegação. E o melhor: com apenas algumas linhas de HTML, CSS e JavaScript, você cria algo funcional e profissional.

Dicas finais

  • Pratique: Baixe os arquivos no início do post e teste o código!
  • Explore mais: Quer criar outras barras de progresso, como uma que aumenta com o tempo? Deixe nos comentários do vídeo ou experimente adaptar o código com setInterval.
  • Aprofunde-se: O vídeo sugere aulas sobre position, transition e arrow functions. São conceitos que valem a pena estudar para dominar desenvolvimento web.

Esse projeto é simples, mas ensina muito sobre manipulação do DOM, eventos em JavaScript e estilização com CSS. Para praticar, teste, adapte e crie suas próprias barras de progresso! 🚀

E se você gostou deste passo a passo, provavelmente vai curtir também nossos outros conteúdos sobre HTML, CSS e JavaScript. Dá uma conferida!

E caso prefira esse conteúdo no formato de vídeo, assista aqui embaixo ou acesse o nosso canal do YouTube!

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?

Posts mais recentes de HTML e CSS

Posts mais recentes da Hashtag Treinamentos

Pedro Surreaux

Autor do artigo

Pedro Surreaux

Redator de Publicações

Redator de conteúdo na Hashtag Treinamentos. Produzo textos didáticos sobre tecnologia, buscando informar e engajar o público de forma acessível e descomplicada.

Ver mais posts