Pill_ScrollBar: Free Navigation Component by Aathif Thajudeen

A sleek, minimalist capsule scroll progress tracker for Framer. Features seamless top-to-bottom live tracking, native sidebar color styling, and flexible canvas resizing that preserves its perfect pill geometry without layout bugs.

About this Component

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.