---
title: "Track Scroll — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Plaiter HQ · Interactive. Scroll Progress is a flexible UI component that displays real-time scroll progress as users move through a page."
canonical: "https://framer.elliotli.dev/component/track-scroll"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Track Scroll

# Track Scroll

[View on Framer](https://framer.com/marketplace/components/track-scroll/?via=elliot-li)

![Track Scroll preview image 1](https://framer.elliotli.dev/og/component/track-scroll/c753cb764c0f253f/1600x1200.jpg)

## Summary

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

## Description

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8426

## Details

- **Author**: Plaiter HQ
- **Price**: $10.00
- **Published**: 2026-01-25
- **Updated**: 2026-01-25
- **Added**: 2026-01-11
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase