## Reading Progress (S—188)

An article reader with a thin progress bar on top, minutes left that count down, and a back-to-top ring that fills.

- URL: https://sundaeui.dev/components/reading-progress
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/reading-progress.json`
- Tags: back-to-top, article, blog, reading-progress, scroll, progress-bar

As you scroll, the top bar fills and the header swaps “6 min read” for “3 min left”. After a screen of scrolling a back-to-top button appears; its ring fills with progress.
Works on any scroll container or the window.

### Usage

```tsx
import { ReadingProgress } from '@/components/sundae/reading-progress'

<ReadingProgress />
```

### Props

- `children` (`ReactNode`, required): Article content.
- `wpm` (`number`, default `230`): Reading speed for the estimate.
- `title` (`string`): Header title.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Long articles, docs, terms, changelogs.

### When not to use

- Short pages that fit on screen.

### Accessibility

- The bar is a progressbar; back to top is a labelled button that moves focus to the heading.
- Reduced motion removes the movement and keeps every state change.