Spinner

An accessible indeterminate progress indicator for operations without a known completion percentage.

Default

An accessible indeterminate loading status.

Loading account balances

tsx

<Spinner label="Loading account balances" />

tsx

import { Spinner } from "madagent";

Three sizes cover compact controls, standard surfaces, and prominent loading states.

Loading small itemLoading itemLoading large item

tsx

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

Button uses Spinner internally and exposes aria-busy on the button.

tsx

<Button loading>Saving</Button>

Prop	Type	Default	Description
`size`	`"sm""md""lg"`	`"md"`	Spinner diameter
`label`	`string`	`"Loading"`	Visually hidden accessible status label

Components automatically adapt to right-to-left languages using CSS logical properties.

جار تحميل الأرصدةجار تحميل الأرصدة…

tsx

<div style={{ display: "flex", gap: "0.5rem" }}>
  <Spinner label="جار تحميل الأرصدة" />
  جار تحميل الأرصدة…
</div>