# antuikit / Spin

> Spin with a thinner `percent` ring, and otherwise the same as antd's.

Docs: https://antuikit.com/docs/components/spin

## Install

npx antuikit@latest init
npx antuikit@latest add spin

## Import

import { Spin } from "@/components/ui/spin";

## Demos

- [Sizes](https://ui.antuikit.com/embed/spin/sizes.md): Set `size` to `small` or `large` to scale the spinner, and leave it off for the default, `medium`.
- [Container](https://ui.antuikit.com/embed/spin/container.md): Wrap content in `Spin` and set `spinning` to dim it and show the spinner on top, without moving the layout.
- [Description](https://ui.antuikit.com/embed/spin/description.md): Pass `description` to show a line of text under the spinner.
- [Delay](https://ui.antuikit.com/embed/spin/delay.md): Set `delay` in milliseconds to wait before showing the spinner, so a request that finishes sooner never flashes it.
- [Percent](https://ui.antuikit.com/embed/spin/percent.md): Set `percent` to a number to draw a progress ring around the spinner, or to `"auto"` to fill it on its own when you have no number.
- [Fullscreen](https://ui.antuikit.com/embed/spin/fullscreen.md): Set `fullscreen` to cover the whole page with a mask and spinner, then turn `spinning` off from code, since the mask cannot be clicked away.
- [Indicator](https://ui.antuikit.com/embed/spin/indicator.md): Pass `indicator` any node to replace the dots, like a loading icon from your icon pack with `animate-spin`.
- [Dot color](https://ui.antuikit.com/embed/spin/semantic.md): Pass a text color to `className` to recolor the dots, or to `classNames.section` when the Spin wraps content.
- [Reloading a card](https://ui.antuikit.com/embed/spin/section-fetch.md): A card whose Reload button sets `spinning` on its body while it fetches, so the rota dims in place.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/spin`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Spin` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.