CSS - Como Fazer Uma Barra De Progresso De Leitura

Uma coisa bem legal que podemos fazer para melhorar a usabilidade
é criar uma barra de progresso, indicando quanto falta para
terminar a leitura de um determinado texto ou para terminar a página!

Veja como é fácil criar uma barra de progresso de leitura,
usando CSS e Javascript!

Primeiramente, precisamos adicionar HTML:

1
2
3
4
5
6
7
8
<header>
<h2>Leitor</h2>
<div class="progress-container">
<div class="progress-bar" id="js-barraDeLeitura"></div>
</div>
</header>

<div>Conteúdo</div>

Agora, adicionamos o CSS da nossa barra de progresso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* Estilo do Header - Fixo no Topo */
header {
background-color: #f1f1f1;
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}

.progress-container {
background: #eeeeee;
height: 5px;
width: 100%;
}

/* A barra de progresso */
.progress-bar {
background: #2196f3;
height: 4px;
width: 0%;
}

E agora, adicionamos o Javascript:

1
2
3
4
5
6
7
8
9
10
11
// Quando o usuário fizer scroll na página, 
// irá disparar a função showProgressBar
showProgressBar = () => {
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById("js-barraDeLeitura").style.width = `${scrolled}%`;
}
window.onscroll = () => {
showProgressBar()
};

Neste link você pode ver o resultado obtido
através deste código que fizemos!

Bem legal o efeito e ainda mostra ao usuário quanto ele já
leu de um determinado post, melhorando a usabilidade!