<cad-spinner>
Spinner
Show that work is running when its progress is unknown. Use Progress when you can measure completion.
Syncing data
Motion styles
Dashed
Segmented
Gradient
Dots
Pulse
Bounce
Variants and sizes
Choose a motion style from the examples above. ring is the default. Sizes are xs, sm, md, and lg; tones are blue, mint, amber, red, and neutral.
When to use it
Use Progress when you know the completed amount. Avoid showing a spinner for work that finishes almost immediately.
API reference: <cad-spinner>
Accessibility
Provide a short label. The spinner uses role="status". Repeat the label in the default slot for a readable fallback before JavaScript loads, and keep visible context beside the indicator.