ScrollProgress brings a stylish and functional scroll tracker to your Framer site. Whether you are building a long blog post or a deep-dive landing page, this component helps users visualize their reading progress while providing a quick, seamless way to jump back to the top of the page.
It tracks the user's scroll position in real-time and displays it through three distinct visual styles. The component handles all the progress calculations automatically and includes an optional "Back to Top" button that appears as the user moves down the page. It is built to be lightweight and fully responsive, ensuring a smooth experience on any device.
Styles and Layout: Toggle between a sleek Top Bar, a modern Circular indicator, or a subtle Sidebar Dot. You can also adjust the bar height and button size to fit your design perfectly.Visuals and Motion: Fine-tune the animation speed and opacity for a premium feel. You have full control over the color palette, allowing you to create beautiful gradients with two custom color picks.Navigation Logic: Choose whether to show or hide the Back to Top button and position it on the left or right side of the screen to stay out of the way of your main content.
Long-form blog articles and case studiesLanding pages with multiple sectionsDocumentation sites and help centersPortfolio sites and creative resumesAny content-heavy webpage needing better UX
If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
