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
