ScrollProgress

Binds an element's scale to scroll progress through the page (or a specific section). Usually pinned at the top of the viewport as a progress bar.

Scroll the page — the red bar tracks document progress.

Usage

import { ScrollProgress } from '@bwo-ui/react';

<ScrollProgress
  className="progress-bar"
  style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: 3, background: 'var(--bwo-red)' }}
/>

Props

Prop	Type	Default	Description
`start`	`string`	`'top top'`	ScrollTrigger start.
`end`	`string`	`'bottom bottom'`	ScrollTrigger end.
`axis`	`'x' \| 'y'`	`'x'`	Axis the bar scales on.
`origin`	`string`	—	Transform-origin (defaults to left/top center based on axis).