Progress Bar
Layoutiframe sandboxA reading progress bar that visualizes scroll position.
progress bar
scroll progress
reading progress
framer motion
Preview
Installation
Use the shadcn CLI to install this component:
npx shadcn@latest add https://messyui.dev/r/progress-bar.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| position | string | "top" | Position of the progress bar |
| color | string | "#eec847" | Color of the progress bar |
| height | number | 2 | Height of the progress bar (Tailwind scale) |
| origin | string | "left" | Transform origin of the animation |