Pill_ScrollBar

Pill Scroll Bar — Minimalist Scroll Tracker

Elevate your site's UX with a premium, highly-polished Pill Scroll Bar navigation component. Modeled after clean capsule geometries, this tracker gives visitors a sleek, minimalist visual cue of how far they have scrolled down your page.

It is completely collision-proof and engineered to integrate natively with Framer's built-in workspace styling panel.

🌟 Key Features

• Perfect Canvas Preview: Displays a 50/50 color split inside your Framer design view so you can immediately preview your style combinations without guessing.

• Flawless Live Execution: Synchronizes perfectly with browser viewports to transition smoothly from 100% unprogressed background to full tracking color.

• Custom Corner Radius: Use the native slider property to adjust corner roundness. Dial it up for a smooth capsule pill shape or lower it down to fit sharp, boxy grids.

• Framer-Native Sizing: Adjust component width and height directly using Framer’s right-hand Size panel—its structural geometry scales perfectly without distortion.

• Collision-Proof Layout: Built to leverage Framer’s native wrapper layout properties, preventing preview collapses or 0px rendering bugs.

• Instant Sidebar Controls: Toggle your progress tracking and base background colors instantly via built-in color pickers.