---
title: "SmartScrollProgress — Framer component · Best of Framer"
description: "$1.00 · Framer component · by Arvind Singh · Interactive. 5-in-1 scroll progress indicator"
canonical: "https://framer.elliotli.dev/component/smartscrollprogress"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/SmartScrollProgress

# SmartScrollProgress

5-in-1 scroll progress indicator

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

![SmartScrollProgress preview image 1](https://framer.elliotli.dev/og/component/smartscrollprogress/544f19acffa648c9/1600x1200.jpg)

## Summary

5-in-1 scroll progress indicator

## Description

## Getting Started

Using Smart Scroll Progress is as simple as drag and drop. Add the component anywhere on your page - it automatically positions itself using fixed positioning, so placement on the canvas doesn't matter. No wiring, no code, no extra setup. It just works.

### 5 Visual Styles

Pick the style that fits your design:

-   **Top/Bottom Bar**: A sleek horizontal progress bar fixed to the top or bottom edge of the viewport. Supports an optional glow effect for extra visual punch.
    
-   **Circular Indicator**: A ring-style progress circle that sits in any corner. Shows optional percentage text inside.
    
-   **Side Rail**: A minimal vertical bar on the left or right edge of the screen. Great for clean, modern layouts.
    
-   **Floating Pill**: A compact floating widget with an inline progress bar and optional percentage label. Appears at the bottom of the viewport.
    
-   **Percentage Counter**: A standalone number counter with 3 sub-styles: Minimal (text only), Badge (with background), and Label + Bar (text with a mini progress bar).
    

### Full Customization

Every style gives you granular control right from the property panel: progress color, track color, text color, border radius, opacity, position, offset, size, thickness, stroke width, font size, font weight, and more. Each variant only shows the controls relevant to it — no clutter.

### Smart Behavior

-   Hide at Top: Automatically hides the indicator when the user is near the top of the page, with an adjustable threshold
    
-   Smooth Animations: All progress updates use spring physics via Framer Motion for fluid, natural movement
    

**Ideal For**

Blog posts, long-form articles, case studies, documentation pages, portfolios, and any page where readers benefit from knowing how far they've scrolled.

[Preview all styles →](https://smartscrollprogress.framer.website/)

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

-   All · #8732

## Details

- **Author**: Arvind Singh
- **Price**: $1.00
- **Published**: 2026-03-04
- **Updated**: 2026-04-30
- **Added**: 2026-02-28
- **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