# Motion Scroll Progress

Top reading progress bar in long articles and technical documentation.

- id: `motion-scroll-progress`
- Page: https://agentic-ui-kit.com/components/motion-scroll-progress
- Live preview: https://agentic-ui-kit.com/live/component/motion-scroll-progress

## Install

```bash
agentic-ui add motion-scroll-progress
npx shadcn@4.17.0 add @agentic-ui/motion-scroll-progress
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** scroll-linked-progress, progress-bar-indicator, circular-progress-indicator, reading-analytics, section-milestones, personality-gating, reduced-motion-fallback, informative-state-preservation
- **Intents:** track-status, navigate, explore-detail, monitor-live
- **Suits domains:** saas, knowledge, marketing, operations, ecommerce
- **Interaction:** scroll, click, keyboard-navigation, theme-switch
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** Top reading progress bar in long articles and technical documentation, Progress indicator with back-to-top in analytics dashboards and reports, Progress tracking in terms and agreements modals and audit flows
- **Avoid when:** Static pages that fit entirely within the initial viewport, Single-step input forms or modals without scrollable content
- **Preserve when adapting:** reduced-motion-fallback, personality-timing-table, aria-progressbar-semantics, back-to-top-keyboard-action, reading-time-estimation
- **Replace when adapting:** reading-content, accent-colors, milestone-sections
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.17/10
- **Quality breakdown:** visual 8.8/10, responsive 9/10, accessibility 9.2/10, code 9/10
- **Uses primitives:** button, badge
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/motion-personalities, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion