Scrollprogress

Shows reading progress as a bar at the top of the page.

Usage#

Add to your layout to show scroll progress.

import { ScrollProgress } from "fromsrc/client";

export default function Layout({ children }) {
  return (
    <>
      <ScrollProgress />
      {children}
    </>
  );
}

Custom color#

Change the progress bar color.

<ScrollProgress color="#22c55e" />
<ScrollProgress color="var(--accent)" />

Custom height#

Adjust the bar thickness.

<ScrollProgress height={4} />

Props#

Features#

• Fixed position at top of viewport
• Smooth animation on scroll
• Accessible with ARIA progressbar role
• Passive scroll listener for performance