Spinner
The loading primitive for action busyness. The button embeds it, and it ships standalone for inline working moments.
Spinner or skeleton
A spinner reports that an action is running: a form submits, a setting saves. A skeleton reports that a region is loading: a list, a card, a page of content. Pick one for a given wait, never both.
Sizes
Two sizes match the button size tiers: default at 16px and sm at 12px. Standalone use takes default.
Color
The arc draws in currentColor and there is no track behind it, so the spinner inherits the text color of whatever contains it.
Motion
One state: spinning. The arc turns 360° per 800ms, linear and endless, on CSS keyframes. There is no enter animation and no exit animation. The spinner appears and disappears at once.
Accessibility
Standalone, the spinner carries role="status" and reads out its label, which defaults to "Loading". It never takes focus and never takes a tab stop. A component that announces its own busyness, such as the button, embeds the spinner with aria-hidden so the wait is announced once.