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>
comid="progressContainer"
para conter a barra de progresso. - Uma
<div>
comid="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?
- 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.
- Em seguida, a largura da
progressBar
é atualizada de acordo com essa porcentagem. - O evento
window.onscroll
chamaProgressBar()
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.