Scroll Progress Bar — Reading Progress Framer Component

What Is the Scroll Progress Bar?

The Scroll Progress Bar is a Framer component that displays a horizontal reading indicator at the top of your page. As the visitor scrolls down, the bar fills from left to right — reaching full width at the very bottom. It's a clean, minimal way to show reading progress on blog posts, documentation pages, or any long-form content where depth of engagement matters.

No extra libraries required. The animation runs entirely on Framer's built-in motion engine and works out of the box on any project.

How to Set It Up

Place the component at the top of your page, set it to Fixed position in the layout panel, and stretch it to fill the full width. Open the properties panel to set your background color, fill color, outer radius (the background track), and inner radius (the leading edge of the fill bar). The component renders as fully filled in the Framer canvas preview — so you can see exactly how it looks without publishing.

Where It Works Best

The Scroll Progress Bar fits naturally on any page where content length matters — blog posts, case studies, long landing pages, and documentation. If you're building on a Framer template from Sebadam.supply, it drops in without any layout adjustments.

Features

• Fills left to right based on scroll position — 0% at top, 100% at bottom

• Background Color: set a track color behind the fill bar

• Fill Color: the active progress color

• Outer Radius: border radius of the background track

• Inner Radius: border radius of the leading edge of the fill bar

• Shows fully filled in Framer canvas preview

• Fixed sizing — no fit content mode

• No extra libraries — runs on Framer's built-in motion engine

• No coding required

• Compatible with any Framer project or template