Spinner
A loading indicator with role="status" that inherits the text color, in 3 sizes.
YuklanmoqdaYuklanmoqdaYuklanmoqda
'use client';
import { Spinner } from '@akhatmirzo/ui';
export default function SpinnerSizes() {
return (
<div className="flex flex-wrap items-center gap-4 text-text-muted">
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
</div>
);
}
Import
import { Spinner } from '@akhatmirzo/ui';When to use
- For short waits of unknown length — while a request is in flight or a small block is loading.
- Don't put a spinner in a button by hand —
ButtonandIconButtonhave aloadingprop. - If you know the shape of the content — a list, card or table — use
Skeletoninstead so the layout doesn't jump. - One spinner per screen. A dozen spinning indicators wear people out.
Sizes
sm is 16px, md (default) is 20px and lg is 24px.
Color
The spinner draws with currentColor, so it inherits the parent's text color. Set it with
semantic tokens such as className="text-primary".
YuklanmoqdaYuklanmoqdaYuklanmoqdaYuklanmoqdaYuklanmoqda
'use client';
import { Spinner } from '@akhatmirzo/ui';
export default function SpinnerColors() {
return (
<div className="flex flex-wrap items-center gap-4">
<Spinner className="text-text" />
<Spinner className="text-primary" />
<Spinner className="text-success" />
<Spinner className="text-danger" />
<span className="inline-flex size-10 items-center justify-center rounded-lg bg-primary text-primary-foreground">
<Spinner size="sm" />
</span>
</div>
);
}
With text
When visible text sits next to it, hide the spinner with aria-hidden — otherwise screen readers
announce it twice. For a standalone spinner, give label a specific message.
Buyurtmalar yuklanmoqda...
Jadval yuklanmoqda
'use client';
import { Spinner } from '@akhatmirzo/ui';
export default function SpinnerWithText() {
return (
<div className="flex w-full max-w-sm flex-col gap-3">
<span className="inline-flex items-center gap-2 text-sm text-text-muted">
<Spinner size="sm" aria-hidden="true" />
Buyurtmalar yuklanmoqda...
</span>
<div className="flex h-32 items-center justify-center rounded-lg border border-border bg-surface text-text-muted">
<Spinner size="lg" label="Jadval yuklanmoqda" />
</div>
</div>
);
}
Props
Spinner accepts every other <span> attribute except children.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size: 16 / 20 / 24px |
label | string | 'Yuklanmoqda' | Hidden text for screen readers |
The root element has a data-size attribute. The classes for the spinning ring are exported as
spinnerVariants.
Accessibility
role="status"— screen readers read the hiddenlabel; the spinning ring itself isaria-hidden.- Reduced motion. With "reduce motion" turned on, the spinner keeps turning but slower (1.5s), so the waiting state is still visible.