Track Scroll

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