Scroll Progress Bar
ScrollProgressBar for Framer – A simple, lightweight component that visualizes page scroll progress in real time. It helps users track how far they’ve read on long pages, making it
Make it with Workshop
Build your own component with AI
About this Component
ScrollProgressBar for Framer – Visualize Page Scroll ProgressA lightweight Framer code component that creates a customizable progress indicator linked to the user’s scroll position. Perfect for long-form pages, editorial layouts, portfolios, or any site where you want to give visitors a clear sense of reading progress. The bar automatically tracks scroll position and animates smoothly across the viewport with full control over color, thickness, and orientation.
Features
Horizontal or vertical orientation (top, bottom, left, right)
Adjustable thickness in pixels
Customizable color
Smooth, real-time scroll tracking
Fixed position overlay (always visible)
Minimal and performant — no extra setup required
