Track Scroll

Scroll Progress is a flexible UI component that displays real-time scroll progress as users move through a page.

Scroll Progress is a flexible UI component that displays real-time scroll progress as users move through a page. It supports horizontal bars, vertical bars, and circular indicators, making it suitable for a wide range of layouts and UX needs. You can position it anywhere on the screen, apply solid colors or gradients, adjust thickness and radius, and even display a percentage inside the circular style. It works globally on the page or within a specific scroll container. Key Features Horizontal, vertical, and circular progress styles Fixed positioning with multiple placement options Optional gradient support Custom thickness and corner radius Circular percentage indicator Lightweight and non-intrusive Supports custom scroll containers Use Cases Blog and article pages Documentation sites Long-form landing pages Dashboards and analytics views Reading progress indicators Best Practices / Tips Use subtle colors or gradients for minimal UI distraction Place horizontal bars at the top for reading-focused pages Use circular indicators for dashboards or floating UI elements What’s Included One Scroll Progress component Horizontal, vertical, and circular modes Gradient and solid color options Flexible positioning controls Who It’s For Framer designers and developers Content-heavy websites UX-focused interfaces No-code builders needing scroll feedback