So you have some long blog posts and you want to give some indication to your readers who long it is and how much more they have to go.  With a site leve html block with the following code, you can add a scroll progress indicator every page on your site. Or you can add the code to an individual page 

Add an html block with the following content at the site level.

<style>

#scroll-indicator {
    height: 5px;
    position:fixed;
    top:0;
    left:0;
    width:0%;
    background-color:purple;
    z-index:99999;
}
</style>

<div id="scroll-indicator"></div>

<script>

    $(window).scroll(function(){
    $('#scroll-indicator').stop(true, true).show().fadeOut();
    let wintop = $(window).scrollTop(), docheight = 
    
    $(document).height(), winheight = $(window).height();
    let scrolled = (wintop/(docheight-winheight))*100;
    
    $('#scroll-indicator').css('width',(scrolled + '%'));
})


</script>