Spinner
StableA small spinning ring that shows something is loading.
Also known as loader, loading indicator, progress circle, activity indicator
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Sizes
<div className="flex items-center gap-4">
<Spinner size={14} />
<Spinner />
<Spinner size={24} />
<Spinner size={32} />
</div>Four sizes, from small to large.
When to use it
A small spinning ring for a short wait when you cannot show what is coming. It is marked as a status, so screen readers can find what is loading.
Use it for
- A short wait inside a button, like Saving.
- A row or small area that is loading and has no known shape.
- Next to status text for a step that takes a while.
Not for
- Content whose shape you already know: use Skeleton.
- The wait before the assistant's first words: use TypingIndicator.
- Naming the step the assistant is on: use ShimmerText.
Do and avoid
Loading invoices
March invoice
April invoice
May invoice
Do
- Use it for waits of a second or more when nothing better fits.
- Give it a specific label like "Saving" when more than one can be on screen.
- Add visible text when the wait belongs to a button or a row.
- Match its size to the text beside it.
Avoid
- Do not use a Spinner when a Skeleton could show the shape of the content.
- Do not use it while the assistant writes a reply. Use TypingIndicator before the reply starts and ShimmerText for status text.
- Do not show many spinners in one list. Show one for the whole area.
- Do not make it lime or amber.
On a phone
- Spinner is a fixed pixel size and looks the same on a phone.
- It is not tappable, so give people another way to cancel a long wait.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 16 | Width and height in pixels. |
| label | string | "Loading" | Accessible name announced for the status. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
--fg-muted
Built in
- It is marked as a status and named by its label, "Loading" by default.
- The ring stops spinning for people who turn off motion in their system settings.
- It cannot be pressed, and the Tab key skips it.
What you need to do
- Give it a specific label, like "Saving", when the default "Loading" is too vague or more than one is on screen.
- Show one spinner for an area, not one per item, so screen readers do not meet the same status many times.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide