How to Add a Scroll Progress Bar in 5 Minutes (No Libraries)

How to Add a Scroll Progress Bar in 5 Minutes (No Libraries)
December 19, 2025 | Read time: 4 minutes

Cut Code Review Time & Bugs in Half

Code reviews are critical but time-consuming. CodeRabbit acts as your AI co-pilot, providing instant Code review comments and potential impacts of every pull request.

Beyond just flagging issues, CodeRabbit provides one-click fix suggestions and lets you define custom code quality rules using AST Grep patterns, catching subtle issues that traditional static analysis tools might miss.

CodeRabbit has so far reviewed more than 10 million PRs, installed on 2 million repositories, and used by 100 thousand Open-source projects. CodeRabbit is free for all open-source repo's.

Get Started Today

Sponsor this newsletter to reach 9,000+ active developers

Today we’re building a tiny but super useful feature: a scroll progress indicator that lives at the top of your page. It shows readers exactly how much of the article they’ve read. Perfect for blogs, docs, newsletters, or any long-form content.

The best part? It’s just a few lines of HTML/CSS/JS. Works on every browser, including mobile, and loads instantly.
Let’s build it step by step.

Step 1: Add the HTML structure

Right at the very top of your <body> (before your content), paste this:

                            
<div class="progress-container">
    <div class="progress-indicator"></div>
</div>

That’s it.

  • .progress-container is the full-width bar that stays fixed at the top.
  • .progress-indicator is the actual moving blue line that fills up as you scroll.

Step 2: Add the CSS (place it anywhere in <head> or a <style> tag)

                            
.progress-container {
    height: 5px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
}

.progress-indicator {
    height: 5px;
    width: 0;
    background-color: #007DFC;
}

What’s happening here:

  • Fixed position keeps it glued to the top of the viewport.
  • z-index: 2 makes sure it stays above everything else (even your header).
  • Starts at width: 0 and we’ll increase grow it with JavaScript.

Step 3: Add the JavaScript (put it at the end of <body> or in a <script> tag)

                            
const progressIndicator = document.querySelector('.progress-indicator');

window.addEventListener('scroll', function() {
    if (progressIndicator) {
        // Calculate scroll percentage
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scrolled = (scrollTop / scrollHeight) * 100;

        // Update the bar width
        progressIndicator.style.width = `${scrolled}%`;
    }
});

That’s the magic.

We listen for scroll events, calculate how far down the page the user is (as a percentage), and set the indicator’s width accordingly.
The || fallback handles differences between browsers.

I’ve added this indicator to my website. You can see it in action here: How to Add a Scroll Progress Bar in 5 Minutes (No Libraries).

P.S. If you drop this into your next blog post or portfolio, I’d love to see it, send me a link or screenshot!