Skip to content
MIZU.

ScrollProgress

A thin reading indicator driven by real document scroll progress.

Live — this one is real

0%

Scroll this document. The line measures the available document scroll, including the API below.

Usage

import { ScrollProgress, Stack } from "mizu-ui";

export function Example() {
  return (
    <Stack gap={20}>
      <ScrollProgress label="Documentation reading progress" />
      <p className="mizu-field-hint">
        Scroll this document. The line measures the available document scroll,
        including the API below.
      </p>
    </Stack>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect motion/Scroll.tsx

Source is included in the npm package under src/motion/Scroll.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring"Reading progress"Accessible progress name.
classNamestring—Optional placement and styling.

Accessibility

Named progressbar exposes a bounded 0–100 value. No fabricated reading time or completion state.

Motion

A managed Motion scroll value updates the line directly; the announced percentage updates only on integer changes.

Works alongside

MaskLineRevealMagneticMarquee