# Scroll Progress Bar

> The Scroll Progress Bar component enhances user experience by providing a visually dynamic indicator as the user scrolls through the page. It visually informs users how much of the page has been scrolled, making it especially useful for longer content. Unlike static progress bars, this animated indicator offers a more modern and interactive experience. The scroll bar can be configured as a circular or linear bar and can be positioned in specific corners of the page, such as the bottom-right or top-left. Built using Framer Motion and Tailwind CSS, the Scroll Progress Bar ensures smooth transitions and an aesthetically pleasing design.

- Author: [Shadcn UI Kit](https://21st.dev/@bundui)
- Library: [Bundui](https://21st.dev/@bundui/library/bundui)
- License: mit
- Tags: Scroll Progress
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@bundui/components/scroll-progress-bar

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/bundui/scroll-progress-bar?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/scroll-progress.md