DEV Community

Cover image for Reading Progress Bar
SnippFlow
SnippFlow

Posted on

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 + '%');
        });
    }
}

});
Enter fullscreen mode Exit fullscreen mode

Full article: Reading Progress Bar
CSS Snippets

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay