Spin is installed into your project as a file you own. It takes the same props as Ant Design v6's Spin and adds none, so every prop in the table below works as documented there, plus a ref.
The kit changes one thing: the percent ring is drawn with half the stroke. Pass your own stroke-width class to change it. The default dots are CSS, not an icon, so switching icon packs does not change them.
Install
npx antuikit@latest init
npx antuikit@latest add spin
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/spin, never from antd. The file lives in your project, so the import is a path, not a package.
import { Spin } from "@/components/ui/spin"
The axes
size takes small, medium or large. Left unset it follows the surrounding ConfigProvider, which is medium by default. 'default' is deprecated, logs a warning and goes away in v7, so write medium or nothing.
Flags
Two booleans. The first defaults to true.
spinning defaults to true, so a bare <Spin /> spins with no props, and a Spin around content without spinning stays loading forever. Pair it with delay, the milliseconds to wait before the spinner shows: if the wait ends first, nothing appears.
fullscreen covers the whole page with a mask instead of wrapping children, with the spinner centered in light ink. It blocks the pointer but does not trap focus.
Slots
The props that take a node.
children turns the spinner into a container. The content keeps its place, dims, stops taking clicks, and gets the spinner centered on top. Nothing around it moves.
description is a line of text with the spinner, with or without children. tip is its old name, deprecated and warned about at runtime.
indicator replaces the dots with your own element. A pack icon does not spin on its own, so add animate-spin. Set it for the whole app with <ConfigProvider spin={{ indicator }}>.
Events
Spin has no event props. Everything it passes to its root element is in the API table below.
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector: a part with a key keeps its name across versions. To recolor the dots, pass a text color to section.
1
<Spin
2
classNames={{
3
root: "…",
4
section: "…",
5
indicator: "…",
6
description: "…",
7
container: "…",
8
tip: "…",
9
mask: "…",
10
}}
11
/>
A Tailwind utility on one of these keys wins without !important. Setting a component token's CSS variable on the root does not work: style the part instead.
API Reference
Spin
Spin's props. Rows marked antuikit in the Version column are added by the kit.