Most apps need to convey task completion, file uploads, or streaming responses without rolling custom SVGs, color tokens, and size scaling. Percentage displays and indeterminate spinners are copy-pasted across dashboards, forms, and modals — each one reinventing dark-mode classes, accessible ARIA labels, and shape consistency.

Progress is a controlled component with two variants: bar (default, full-width linear) and circular (inline SVG ring). Expose value and max props for determinate progress, or set indeterminate={true} for loading states. Control size with size (sm / md / lg), color with color (any of 22 Tailwind palette names), and optionally display the percentage with showValue. Both variants carry stable data-react-fancy-progress="" and full ARIA progressbar attributes for accessibility.

Import from @particle-academy/react-fancy, then render <Progress value={45} max={100} variant="bar" color="blue" showValue /> for a determinate bar, or <Progress indeterminate variant="circular" size="lg" /> for a spinning ring. The component handles percentage math and transitions smoothly across light and dark modes.