Scroll Progress

A bar that fills as you scroll the page or a panel.

Dependenciesmotion

Reading progress

The bar at the top fills as you scroll. On a page it is fixed to the top of the screen and follows the whole document; here it follows this panel.

The bar at the top fills as you scroll. On a page it is fixed to the top of the screen and follows the whole document; here it follows this panel.

The bar at the top fills as you scroll. On a page it is fixed to the top of the screen and follows the whole document; here it follows this panel.

The bar at the top fills as you scroll. On a page it is fixed to the top of the screen and follows the whole document; here it follows this panel.

The bar at the top fills as you scroll. On a page it is fixed to the top of the screen and follows the whole document; here it follows this panel.

The bar at the top fills as you scroll. On a page it is fixed to the top of the screen and follows the whole document; here it follows this panel.

Installation#

pnpm dlx shadcn@latest add @balick/scroll-progress

Or pass the full URL: https://ui.balick.me/r/scroll-progress.json

Usage#

import { ScrollProgress } from "@/components/ui/scroll-progress"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <ScrollProgress />
      {children}
    </>
  )
}

Props#

Prop	Type	Default	Description
`scrollRef` The element that scrolls. It is the page by default.	`React.RefObject<HTMLElement \| null>`	—	The element that scrolls. It is the page by default.
`className` Replaces the default placement and color (fixed to the top, 2px high, foreground color).	`string`	—	Replaces the default placement and color (fixed to the top, 2px high, foreground color).