Feedback
Spinner
The one element in the library allowed to spin. It stands in for a 'please wait' sentence, so a working state costs 16px instead of a line of copy, and it carries its own accessible name, which is what lets it be the message rather than decoration beside one.
npx shadcn@latest add @minflow/spinnerWhere to use it
- Work with an unknown duration: a request in flight, a build starting, a search running.
- Inside controls and rows where a progress bar would not fit.
- Never when the completion percentage is known; a progress bar or radial tells the reader how much is left.
Variations
Three sizes
16 inside dense rows and controls, 20 standalone, 24 on touch-first surfaces. Nothing in between, so spinners across the app stay comparable.
Beside a status line
When the work is worth naming as well as showing. The spinner leads and the words follow, which keeps the pair readable at a glance.
Named work
When several things can be loading at once. Pass label so a screen reader hears which one is still running instead of three identical 'Loading' announcements.