# Scroll progress

> A reading progress bar that springs with the page or any scroll container.

Component · Pro · https://lodeui.com/components/scroll-progress

## When to use

- Long articles, docs and changelogs.
- Scrollable panels where position matters.

## When not to use

- Short pages: it adds noise.

## Installation

```bash
npx shadcn@latest add @lode/scroll-progress
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { ScrollProgress } from "@/components/ui/scroll-progress";

// Whole page
<ScrollProgress className="fixed inset-x-0 top-0 z-50" />

// A scrollable panel
const ref = React.useRef<HTMLDivElement>(null);
<ScrollProgress container={ref} showValue />
<div ref={ref} className="h-96 overflow-y-auto">…</div>
```

## API reference

### ScrollProgress

A bar that scales with scroll position.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| container | `RefObject<HTMLElement>` | – | Element to track; omit for the page. |
| showValue | `boolean` | `false` | Percentage pill that rides the bar. |
| color | `string` | `var(--brand)` | Bar and glow color. |

## Accessibility

- Decorative and aria-hidden: scroll position is already conveyed by the scrollbar.

## Motion

- Springs toward the scroll position (stiffness 220, damping 32).

## Responsive behavior

- Full width of its container; position it fixed for page progress.

## Performance

- A single scaleX transform driven by a motion value.

## Notes for AI

- For page progress, place it fixed at the top with a high z-index.

## Related

- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.
- [Reveal](https://lodeui.com/components/reveal) — Scroll-triggered fade-and-slide, plus a Stagger for groups.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.