
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.
Better at UI design with every challenge
Select complexity and generate challenge.
Pick a platform.
Get design challenge updates in your inbox
New prompts and challenge updates. It’s free.