Search documentation

Search components and pages

Scroll Progress Bar

Fixed reading progress bar driven by scroll.

Scroll this docs page

The green bar above is pinned to this demo frame, not the browser window.

Installation

Requires MotionProvider and gsap. Add the scroll progress bar component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/scroll-progress-bar.json

Usage

import { ScrollProgressBar } from "@/void/scroll/scroll-progress-bar"

<ScrollProgressBar color="#22c55e" />

Examples

Default

Scroll this docs page

The green bar above is pinned to this demo frame, not the browser window.

Code

import { ScrollProgressBar } from "@/void/scroll/scroll-progress-bar"

<ScrollProgressBar color="#22c55e" />