Post

Criar uma barra de progresso

Dia 4 do projeto 30 dias com js

Criar uma barra de progresso

Já passamos da metade da primeira semana! Hoje é o 4º dia do desafio e o projeto foi criar uma barra de progresso que avança conforme a rolagem da página.

Como de costume, comecei direto pelo HTML, criando os seguintes elementos:

  • Uma <div> com id="progressContainer" para conter a barra de progresso.
  • Uma <div> com id="progressBar" dentro da anterior, que será preenchida conforme o usuário rola a página.
  • Um <main> com alguns textos de exemplo, garantindo que haja conteúdo suficiente para rolagem.

Agora, vamos ao JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
function ProgressBar() {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
	let scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
	
	let scrollPercentage = (scrollTop / scrollHeight) * 100;
	let progressBar = document.getElementById("progressBar").style;
	progressBar.width = scrollPercentage + "%";
};

window.onscroll = function () {
	ProgressBar(); 
};

Como esse código funciona?

  1. A função ProgressBar() calcula o quanto o usuário já rolou na página:
    • scrollTop pega a posição atual da rolagem.
    • scrollHeight pega o tamanho total da página menos a altura visível.
    • scrollPercentage calcula a porcentagem da rolagem.
  2. Em seguida, a largura da progressBar é atualizada de acordo com essa porcentagem.
  3. O evento window.onscroll chama ProgressBar() sempre que o usuário rolar a página, atualizando a barra em tempo real.

E com isso, fui ao CSS e fiz com que o progressContainer ficasse fixo na tela enquanto a página rola. Também defini uma cor para a barra, garantindo que ela fique visível.

Agora está tudo pronto e funcionando! Basta rolar a tela para ver a mágica acontecer. 🔥


O resultado final você pode conferir aqui
link para o repositorio do projeto

Esta postagem está licenciada sob CC BY 4.0 pelo autor.