An animated loading indicator for processes with unknown duration, such as data fetching or form submission. Supports visible labels, multiple sizes, and a dark background variant. For content with known dimensions, use Skeleton instead.
ts
import{XDSSpinner}from'@xds/core/Spinner'
Best practices
Guidance
Practices
Do
Provide a meaningful label to describe what is loading for screen reader users.
Do
Use the "onMedia" shade when placed on dark or accent-colored backgrounds.
Don't
Use for content areas with known dimensions — use Skeleton to preserve layout instead.
Don't
Stack multiple spinners in the same view — use one to represent the overall loading state.
Examples
Common configurations, variations, and states.
Spinner — On Media Shade
Default and onMedia shade spinners for light and dark backgrounds.