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
| 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. |
Default and onMedia shade spinners for light and dark backgrounds.