AI Loader
betaA labelled AI waiting indicator — thinking dots, an indeterminate bar or a thinking grid — with an optional elapsed-seconds counter.
- AI
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add ai-loadernpm packages installed: class-variance-authority.
import { AILoader } from "@/components/ui/ai-loader";Default
Gallery
<AILoader>
| Prop | Type | Default |
|---|---|---|
labelVisible text before the indicator, e.g. "Thinking". Also what is announced. | string | — |
showElapsedAppends a live elapsed-seconds counter. Long waits need a sign of progress. | boolean | false |
size | "sm" | "md" | "lg" | "md" |
srLabelAnnounced when there is no visible label. | string | "Loading" |
variantWhich loader: thinking dots, an indeterminate bar, or a thinking grid. | AILoaderVariant | "dots" |
Plus every attribute of <span> except children.
The root is a single role="status" region announcing the label (or `srLabel`, "Loading" by default). The loader inside it and the elapsed counter are aria-hidden — a counter ticking ten times a second inside a live region would announce continuously. The loaders are indicators: under reduced motion they slow rather than stop. None fakes determinate progress.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes