Scroll Progress
Indicate how far the user has scrolled through content.
Preview
Import
import { ScrollProgress } from "@sigil-ui/components";Usage
<div className="w-full"><p>Reading progress · 64%</p><ScrollProgress fixed={false} value={64} height={8} aria-label="Reading progress" className="w-full bg-[var(--s-surface)]" /></div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top" | "bottom" | top | Position on screen. |
height | number | 3 | Bar height in pixels. |
fixed | boolean | true | Whether to use fixed positioning. |
value | number | — | Controlled progress value from 0 to 100. Defaults to document scroll progress. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |