# Spin

A loading spinner wrapper. Shows a spinner overlay when `spinning` is true, otherwise renders children normally.

## When to Use

- Loading states for buttons or sections
- Blocking content while data loads
- Inline loading indicators

## Properties

- **`spinning`** `boolean` (default: `true`) — Whether to show the spinner
- **`size`** `'small' | 'default' | 'large'` (default: `'default'`) — Spinner size (small=24px, default=32px, large=48px)
- **`styles`** `Styles` — Custom styles for the spinner container

### Base Properties

Supports [Base properties](../../BaseProperties.md).

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Examples

```jsx
<Spin>
  <Button>Loading...</Button>
</Spin>

<Spin spinning={isLoading} size="large">
  <Card>Content</Card>
</Spin>

<Spin spinning={false}>
  <Text>Content is loaded</Text>
</Spin>
```
