---
title: "Pill_ScrollBar — Free Framer component · Best of Framer"
description: "Free Framer component · by Aathif Thajudeen · Navigation. Progress bar that tracks scrolling"
canonical: "https://framer.elliotli.dev/component/pill-scrollbar"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Pill\_ScrollBar

# Pill\_ScrollBar

Progress bar that tracks scrolling

[View on Framer](https://framer.com/marketplace/components/pill-scrollbar/?via=elliot-li)

![Pill\_ScrollBar preview image 1](https://framer.elliotli.dev/og/component/pill-scrollbar/6e5663070841f551/1600x1200.jpg)

## Summary

Progress bar that tracks scrolling

## Description

**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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1885

## Details

- **Author**: Aathif Thajudeen
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-26
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation