Reading Progress Bar

A reading progress bar that fills as you scroll makes the experience better by giving you a visual indicator of where you are on the page, makes navigation more intuitive and fun.

$(document).ready(function() {

if ($('body').hasClass('single')) {

    var totalHeight = $('main').outerHeight(true);
    var footerHeight = $('footer').outerHeight(true);
    var windowHeight = $(window).height();

    console.log(totalHeight);
    console.log(footerHeight);

    if (totalHeight > 0) {
        $('header').after('<div id="sf-reading-progress-bar"></div>');

        $(window).scroll(function() {
            var scrollPosition = $(window).scrollTop();
            var scrollableHeight = totalHeight + footerHeight - windowHeight;
            var progress = (scrollPosition / scrollableHeight) * 100;
            progress = Math.min(progress, 100);
            $('#sf-reading-progress-bar').css('width', progress + '%');
        });
    }
}

});

Full article: Reading Progress Bar
CSS Snippets