Spinner

Indikator loading aktif untuk proses singkat. Tersedia 5 ukuran dan label aksesibilitas.

import { Spinner } from "@naraya/ui";

Gunakan Spinner untuk proses loading yang durasinya singkat. Untuk loading konten layout, gunakan Skeleton.

Default

<Spinner />

Sizes

<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

Inside button

<Button disabled iconLeft={<Spinner size="xs" label="Memuat aksi" />}>
  Menyimpan...
</Button>

With visible label

Memuat data dashboard...

<Spinner label="Memuat data dashboard" />

Prop	Type	Default	Description
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Ukuran visual spinner.
label	`string`	`"Loading..."`	aria-label untuk screen reader.
...rest	`HTMLAttributes<HTMLDivElement>`	—	Props native div (className, style, dsb).

--color-primary

Aksen stroke spinner

--border-subtle

Track spinner

--duration-slow

Timing animasi putar