Spinner
ui.widgets.Spinner짧은 로딩 대기를 위한 간결한 애니메이션.
BEHAVIOR CONTRACT
크기, 색상, 프레임 스케줄링은 애니메이션 매니저가 일괄 구동합니다.
RECORDED INTERACTION
실시간 프레임을 그대로 담아 정적인 자리표시자가 아님을 보여 줍니다.
// ── 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;
}Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.
SpinnerProps
ui.widgets.Spinnerfn Spinner(props: SpinnerProps) SpinnerBuilder필드
타입
기본값
설명
sizef3220外径(逻辑像素)
stroke_widthf323线宽
color?Colornull弧线颜色(null = 使用主题 accent 色)
*Node
ui.widgets.Spinnermount는 *Node을(를) 직접 반환합니다. 부모 노드에 append하면 됩니다.