Scroll Progress

Show how far a reader has scrolled with a thin progress bar at the top of the page.

Dependencies: motion
Size: 109 lines
Controls: 8 controls

example.tsx

1import { ScrollProgress } from "@/components/onycx/scroll-progress";23export default function Example() {4  return (5    <ScrollProgress6      position={"top"}7      height={2}8      from={"#5a0f14"}9      via={"#8b1e2d"}10      to={"#c8ae80"}11      offsetLeft={0}12      track={false}13      showBadge={false}14    />15  );16}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/scroll-progress.json

1 · Dependencies

npm install motion

2 · Copy the source

components/onycx/scroll-progress.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the scroll-progress.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
position	"top" \| "bottom"	"top"	Viewport edge the bar is pinned to.
height	number	2	Bar thickness in px.
from / via / to	string	"#5a0f14" / "#8b1e2d" / "#c8ae80"	Three-stop horizontal gradient (0 / 50 / 100%).
offsetLeft	number	0	Left inset from 1024px up, for a fixed side nav (the original used 92px).
track	boolean	false	Faint full-width track behind the fill.
showBadge	boolean	false	Optional tabular percentage pill that fades in after 2%.
label	string	""	Accessible name. When set the bar becomes role=progressbar with aria-valuenow; empty keeps it aria-hidden.
zIndex	number	70	Stacking order above fixed headers.