SmartScrollProgress

5-in-1 scroll progress indicator

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 →

5-in-1 scroll progress indicator