progress-bar.html

<!-- Thank you to Ben Ruijl for the progress bar code!
Ben is on GitHub here: https://github.com/benruijl
And you can see the original code here: https://github.com/quarto-dev/quarto-cli/discussions/3842#discussioncomment-4591721 -->

<div id="progress-bar" style="width: 0%; height:4px; background-color: #939bc9;; position: fixed; top: 0px; z-index: 2000;"></div>

<script id="progressbar" type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {

    const bar = document.querySelector('#progress-bar');
    const post = document.querySelector('#quarto-content');
    const html = document.documentElement;
    
    const height = post.scrollHeight + post.offsetTop;
    
    window.addEventListener('scroll', () => {
        bar.style.width = (html.scrollTop / (height- html.clientHeight)) * 100 + '%';
    });
});
</script>