Progress Scroll Bar
This is a customizable scroll progress bar for Framer, featuring horizontal & vertical modes, gradients, animations, percentage labels, and completion actions.
Make it with Workshop
Build your own component with AI
This is a customizable scroll progress bar for Framer, featuring horizontal & vertical modes, gradients, animations, percentage labels, and completion actions.
Make it with Workshop
Build your own component with AI
✅ Features
Horizontal (top/bottom) and Vertical (left/right) progress bars
Sticky or relative positioning
Smooth scroll syncing (optional)
Disable/enable animation with easing controls
Gradient support (with angle, from, to colors)
Optional percentage text inside the bar
Rounded corners, opacity, shadow toggle
Completion color + redirect URL when reaching 100%
Start/end offsets (progress doesn’t have to start at 0%)
Reverse direction (right-to-left or bottom-to-top)
Fully themeable: colors, fonts, thickness, radius
✅ Use Cases
Blog posts or long-form articles (show reading progress)
Landing pages (encourage scrolling to the end)
Portfolio sites (indicate project/story progress)
Documentation or tutorial pages
Marketing pages with storytelling flow
✅ Built For
Designers & creators who want to add a professional, interactive scroll indicator.
Framer users who want a plug-and-play solution without custom code.
✅ Instructions
Drag the Multi Scroll Progress Bar component onto your canvas.
Choose the orientation (Top, Bottom, Left, Right) from the right panel.
Adjust thickness, colors, radius, opacity as needed.
Enable gradient or percentage text for extra style.
Turn on/off smooth scroll or animation in settings.
Optionally set a Completion Color or Redirect URL when progress reaches 100%.
Preview your site → scroll and see the bar fill in real-time.
