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 AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay