Spinner & skeleton
Wait indicators. Spinner for short waits; skeleton for layout that's about to fill in.
Spinner
A 1.6 px stroke arc rotating. Three sizes — 14, 16, 20.
Posting payroll…
Skeleton
A subtle shimmering placeholder. Used while loading a list or detail page — better than a spinner because the user sees where things will appear.
Placement
Spinner inside a button, on a page, or paired with a one-line message.
Fetching receipts…
Anatomy
| Property | Value | Notes |
|---|---|---|
| stroke | 2 px | — |
| speed | 800 ms / rev | Don’t spin faster — feels frantic |
| skeleton bg | --surface-muted → sunken | Shimmer left to right |
| skeleton speed | 1.6 s loop | Slow enough to not distract |
Do & don't
Do
Use a skeleton when you know the layout that will appear. It eliminates layout shift.
Don't
Show a spinner for more than 8 seconds. If something is taking that long, show progress and an estimate.
Do
Inside buttons, swap the leading icon for a spinner and dim the label.
Don't
Use the spinner colour as celebration. The work isn’t done yet.