ScrollProgress

A fixed progress bar that tracks scroll position on the page. Powered by Framer Motion spring physics for smooth animation.

Import

import { ScrollProgress } from "@animui/ui";

Live demo: Scroll this page up and down — the violet bar at the top of the browser window is a live ScrollProgress instance.

Basic usage

Drop ScrollProgress into your root layout so it persists across every page.

import { ScrollProgress } from "@animui/ui";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ScrollProgress />
        {children}
      </body>
    </html>
  );
}

Custom style

Adjust the bar color, thickness, and position using the available props.

// Bottom-positioned bar in brand orange, 4 px tall
<ScrollProgress position="bottom" color="#f97316" height={4} />

// Thicker violet bar at the top (default position)
<ScrollProgress color="#7c3aed" height={6} />

// Slim red bar at the bottom
<ScrollProgress position="bottom" color="#ef4444" height={2} />

Props

Prop	Type	Default	Description
`position`	`"top" \| "bottom"`	`"top"`	Whether the bar appears at the top or bottom of the viewport.
`color`	`string`	`"#7c3aed"`	CSS color value for the progress bar.
`height`	`number`	`3`	Bar thickness in pixels.
`className`	`string`	—	Additional classes.