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.
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).
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.
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.
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.
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).
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.
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.
Arvind Singh
