Spinner

Design a spinner component for an app loading state. Treat it as a reusable UI element, not a one-off illustration. Show the default spinner, its size variants, and how it sits next to text or inside a container when content is still pending.

Include at least three placements: inline next to a label, centered in a panel, and used inside a primary button while that action is in progress. The spinner should read clearly at small sizes and not compete with surrounding content. Use motion that feels continuous and calm, with a defined loop and no abrupt start or stop.

Add the states that matter in real use: idle, loading, and reduced-motion. If you include copy, keep it short and functional, like “Loading” or “Saving…”. The result should make the wait state obvious at a glance and stay accessible for keyboard and screen reader users.

Infuse personality into your spinner design by aligning its style and motion with the brand’s identity. A unique spinner can enhance brand recognition.