# Outcome Spinner Loader

> Outcome spinner loader for React and Tailwind CSS (shadcn/ui) that starts as an indeterminate rotating ring, switches to a determinate progress ring when a percentage is known, and resolves into a drawn check or cross. It is built to carry a request from waiting to a visible outcome in one place, so buttons, forms and cards never need a separate success icon. An outcome spinner is a loading indicator driven by a status prop of idle, pending, progress, success or error rather than an endless animation; this one is a single SVG ring with pathLength-based dash animations, rotates with the Web Animations API, tweens the arc to the new value, draws the check or cross with a stroke-dashoffset animation, bounces once on success and shakes once on error, and rolls an optional label such as Saving… to Saved. Supports sm, md, lg or pixel sizes, default, primary and inherit tones for use inside buttons, an optional percent readout, onSettled with a settle delay, role status with live announcements, light and dark theme tokens, and a reduced motion fallback. Use it in submit buttons, save states, upload cards and inline async actions. The included demo resolves three sample requests and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Spinner, Loader, Loading, Button, Animation
- Live preview: https://21st.dev/@dhxwhy/components/outcome-spinner-loader

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/outcome-spinner-loader?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/spinner.md