Says something is happening when the wait is short or unknown. Four kinds at five sizes.
FreeWeb and Mobile4 variantsMotion
Preview
npx shadcn add @fetaui/spinnerPlayground
Loading
Arc
LoadingLoadingLoadingLoadingLoading
Bars
LoadingLoadingLoadingLoadingLoading
Dots
LoadingLoadingLoadingLoadingLoading
Orbit
LoadingLoadingLoadingLoadingLoading
Loader, Spinning
Configuring your account
This takes a few seconds.
Loader, Progress
64%
Setting up Northline
Step 2 of 3 · about 20 seconds left
- Create workspaceDONE
- Import 1,240 contacts64%
- Invite your team
Loader, Done
All set
Your workspace is ready.
Loader, Error
Could not finish setup
The import timed out. Nothing was lost.
Buttons
Buttons keep their width while loading so the row does not jump.
Chips
SyncingUpdatingIndexingSynced
Inputs
emma.collinsChecking usernameCHECKING
Summarise the call notesSending
List
Uploads
- brief.pdf2.4 MB
- Uploadingmoodboard.fig18.1 MB · 42%
- interviews.zip96 MB
Empty
Processing your request
Please wait while we build the report. Do not refresh the page.
Kind
Size
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/spinner
Accessibility
- Role status with a hidden label such as Saving.
- Pass
label={null}when text beside it says the same. - Set aria-busy on the region that is loading.
Motion
- Linear, steady turns: arc 0.8 s, bars 1 s in 45° steps, orbit 1.4 s.
- Dots breathe over 1.2 s, 200 ms apart.
- Loops pause offscreen.
- With reduced motion, spin becomes a slow 1.6 s pulse.
Responsive behavior
- 12, 16, 20, 24, 32 px at every width. Coloured by the text around it.
Performance
- Arc, Bars and Orbit turn with one CSS rotate on the svg. Dots breathe with CSS opacity. No JavaScript runs per frame.
- All spinners share one IntersectionObserver, and a spinner off screen pauses its animation.
- delay is a CSS animation delay, so a short wait never paints and no timer is set.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Spinner from the spinner registry item. Props: kind (arc, bars, dots, orbit), size (xs to xl, or pixels), label, delay, animated.
- It takes its color from the text around it. Pass label={null} when visible text already says what is loading; otherwise it renders role="status" with hidden text.
- Use delay={300} when the wait may be short. For a full panel use Loader with state, value, steps, status and actions.
- Inside a Button use status="loading", not a Spinner, so the width holds.
Related
SkeletonComponentA placeholder in the shape of content on its way, so nothing jumps when it arrives.ProgressComponentShows how far a task has come, with states for done, paused, failed and unknown length, plus nine recipes.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.BadgeComponentA short label that names a status or a category. The pill stays ink and the mark carries the tone.EmptyComponentSays what is missing and offers the one next step. Eight kinds, from a drop area to a 404.