---
title: "Spinner 컴포넌트 — zenit Zig UI"
description: "짧은 로딩 대기를 위한 간결한 애니메이션.크기, 색상, 프레임 스케줄링은 애니메이션 매니저가 일괄 구동합니다."
url: https://zenit.z.express/ko/components/spinner
language: ko
alternate_en: https://zenit.z.express/components/spinner.md
alternate_zh: https://zenit.z.express/zh/components/spinner.md
alternate_es: https://zenit.z.express/es/components/spinner.md
alternate_ja: https://zenit.z.express/ja/components/spinner.md
alternate_fr: https://zenit.z.express/fr/components/spinner.md
alternate_de: https://zenit.z.express/de/components/spinner.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Spinner

`ui.widgets.Spinner`

짧은 로딩 대기를 위한 간결한 애니메이션.

[Video](https://zenit.z.express/media/stories/spinner.mp4?v=b8738c4012)

**BEHAVIOR CONTRACT**

크기, 색상, 프레임 스케줄링은 애니메이션 매니저가 일괄 구동합니다.

**RECORDED INTERACTION**

실시간 프레임을 그대로 담아 정적인 자리표시자가 아님을 보여 줍니다.

`examples/storybook/stories.zig:638`

```zig
// ── Spinner ──
pub fn buildSpinner(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const r = try row(cx, 20);
    // e2e 墨量断言要框到 spinner 本身：story.<key> 的 rect 还含标题/描述文字，
    // 那些文字的像素会把 spinner 画不出来这件事完全盖住（实测 7600+ dark）。
    r.meta.ownership.meta.test_id = "story.spinner.row";
    try r.appendChild(a, try W.Spinner(.{ .size = 16 }).mount(scope, cx));
    try r.appendChild(a, try W.Spinner(.{ .size = 24 }).mount(scope, cx));
    try r.appendChild(a, try W.Spinner(.{ .size = 36 }).mount(scope, cx));
    return r;
}
```

[GitHub에서 소스 보기examples/storybook/stories.zig:638](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L638)

Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). `W`는 `ui.widgets`이며, `col` / `row` / `label`은 Storybook 내부의 작은 레이아웃 헬퍼입니다.

### SpinnerProps

`ui.widgets.Spinner`

[src/ui/components/spinner/mod.zig:26](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/spinner/mod.zig#L26)

```zig
fn Spinner(props: SpinnerProps) SpinnerBuilder
```

| 필드 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| `size` | `f32` | `20` | 外径（逻辑像素） |
| `stroke_width` | `f32` | `3` | 线宽 |
| `color` | `?Color` | `null` | 弧线颜色（null = 使用主题 accent 色） |

### \*Node

`ui.widgets.Spinner`

mount는 `*Node`을(를) 직접 반환합니다. 부모 노드에 append하면 됩니다.