Trecho de código para atualização de barra de status de acordo com posição do scroll em relação a página. (adapted from Code/Drops #37)

updateBar.js

// pegar o container do elemento a se basear
const divWrap = document.querySelector('.main');

// criando a barra de status
let bar = document.createElement('div');

// estilizando a barra de status
bar.style.height = "4px";
bar.style.width = "0";
bar.style.backgroundColor = "#6633cc";
bar.style.position = "fixed";
bar.style.top = "0";
bar.style.left = "0";
bar.style.zIndex = "99999";
bar.style.transition = "0.2s";

// adicionando elemento no corpo da página
document.body.append(bar);

// função para atualizar a barra de status
function updateBar(){
    // buscando tamanho da caixa principal
    const boxHeight = divWrap.offsetHeight;
    // verificando em que posição da página estamos
    const pagePosition = window.pageYOffset
    
    // calcular a porcentagem da barra
    const updatedBar = pagePosition * 100 / boxHeight;
    
    // atualizando a barra
    bar.style.width = updatedBar + "%";
}

window.addEventListener("load", () => {
    // verificar o movimento do scroll
    document.addEventListener("scroll", updateBar);
});