Scroll Progress · Animate UI

import {
  ScrollProgress,
  ScrollProgressContainer,
  ScrollProgressProvider,
} from '@animate-ui/react/primitives/scroll-progress';

// A scrollable container.
export function Article() {
  return (
    <ScrollProgressProvider>
      <ScrollProgress className="h-1 bg-foreground" />
      <ScrollProgressContainer className="h-96 overflow-y-auto">
        …
      </ScrollProgressContainer>
    </ScrollProgressProvider>
  );
}

// The whole page.
export function PageProgress() {
  return (
    <ScrollProgressProvider global>
      <ScrollProgress className="fixed inset-x-0 top-0 h-1 bg-foreground" />
    </ScrollProgressProvider>
  );
}