Component
Scroll Progress
Reading-progress bar. Production mounts it fixed on the viewport; the preview tracks a local scroll container.
ScrollProgress
Scroll the panel — the brand bar tracks local progress.
Reading pane
Section 1. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 2. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 3. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 4. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 5. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 6. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 7. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 8. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 9. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 10. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 11. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Section 12. In production this mounts fixed at the top of the viewport and tracks document scroll. Here it uses containerRef so the preview is self-contained.
Installation
import { ScrollProgress } from "atroui"Usage
Usually fixed to the top of the viewport with bg-brand.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Positioning + color classes (e.g. fixed, bg-brand). |
| containerRef | RefObject<HTMLDivElement> | — | Scroll container. Defaults to the document. |
| springOptions | SpringOptions | stiffness 200 | Motion spring for scaleX. |