184 Components
AI Generation Progress
MotionSpring-animated SVG ring progress indicator for AI token generation. Shows determinate progress with a rolling token counter, or an indeterminate spin when total is unknown.
325/ 500
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-generation-progress.json"
Props
TypeScript props supported by <AIGenerationProgress />.
| Prop | Type | Default | Description |
|---|---|---|---|
| progress | number | 0 | Progress 0–100. Ignored in indeterminate mode. |
| current | number | — | Current token count shown in ring center. |
| total | number | — | Total token count shown in ring center. |
| indeterminate | boolean | false | Spin indeterminately when total is unknown. |
| size | number | 96 | Ring diameter in pixels. |
| strokeWidth | number | 5 | Ring stroke width in pixels. |
Key Features
- Spring-animated stroke-dashoffset for smooth arc fill on progress changes.
- Indeterminate spinning arc when total token count is unknown.
- Center displays current/total tokens or percentage.
- Configurable size and stroke width.
- Accessible with role=progressbar and aria attributes.
Keyboard & Accessibility
- role='progressbar' with aria-valuenow, aria-valuemin, aria-valuemax.
- aria-label for screen reader identification.