document.addEventListener('scroll', _ => {
    var docElem = document.documentElement;
    var docBody = document.body;
    var docScrollTop = (docBody.scrollTop || docElem.scrollTop);

    readPercent = docScrollTop / (docElem.scrollHeight - docElem.clientHeight) * 100;

    if (readPercent > 0) {
        progressBar = document.querySelector('#progress-bar');
        progressBar.style.setProperty('--scroll', readPercent + '%');
    } else {
        progressBar.style.setProperty('--scroll', '0%');
    }
})

.progress-bar {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 5px;
    z-index: 1;
    left: 0;
    top: 0;
}

.blue-bar {
    background: linear-gradient(to right, blue var(--scroll), transparent 0);
}

.stripes-bar {
    background-image: repeating-linear-gradient(
        45deg,
        blue,
        blue 10px,
        white 10px,
        white 20px
    );
    background-size: var(--scroll) 100%;
    background-repeat: no-repeat;
}

.rainbow-bar {
    background: linear-gradient(to right, red, orange, #ff0, green, cyan, blue, violet var(--scroll), transparent 0);
}