Spinner
$ npx shadcn@latest add https://lacodda.github.io/dowel/r/spinner.jsonIt says something to a screen reader. A page that is busy is otherwise silently identical to a page that is empty. The word for what is loading comes from the product:
<Spinner label={t('loading.versions')} />Under prefers-reduced-motion it stops turning. That is not a detail: for
some readers a spinning thing is not decoration but a symptom. A stopped
spinner still says “busy” through its role, which is the part carrying the
meaning anyway.
Props
Read from the types in ui/spinner.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.
| Prop | Type | Default | |
|---|---|---|---|
size | sm | md | lg | 'md' | |
tone | current | dim | accent | 'current' | |
label | string | What is being waited for, for a screen reader. The product's word. |
And every prop of React's HTMLAttributes<HTMLSpanElement>, passed on.
Accessibility
The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 16 rules applied and passed, and none failed. The accessibility report has every item.
History
Each release that changed ui/spinner.tsx - the file a product copies - newest first.