Spinner

애니메이션으로 움직이는 로딩 표시기를 보여 주는 컴포넌트예요.

출처: 문서

본문

데이터를 불러오는 동안 사용자에게 로딩 중임을 알려 주는 스피너를 표시해요.

<Spinner />

이 컴포넌트는 span 요소를 기반으로 하며, 공통 margin props를 지원해요.

Prop	Type	Default
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`loading`	`boolean`	`true`

예시 (Examples)

Size

size prop으로 스피너의 크기를 제어할 수 있어요.

<Flex align="center" gap="4">
  <Spinner size="1" />

  <Spinner size="2" />

  <Spinner size="3" />
</Flex>

With children

loading prop으로 스피너를 보여 줄지, 아니면 자식 요소를 보여 줄지를 제어할 수 있어요. Spinner는 자식이 숨겨질 때 자식의 크기를 유지하고, 상호작용 가능한 요소를 비활성화해요.

<Flex gap="4">
  <Spinner loading={true}>
    <Switch defaultChecked />
  </Spinner>

  <Spinner loading={false}>
    <Switch defaultChecked />
  </Spinner>
</Flex>

With buttons

Button에는 스피너를 자동으로 구성해 주는 자체 loading prop이 있어요.

<Button loading>Bookmark</Button>

버튼 안에 아이콘이 있다면, 버튼의 disabled 상태를 이용하고 아이콘을 단독 <Spinner>로 감싸서 더 세련된 디자인을 만들 수 있어요.

<Button disabled>
  <Spinner loading>
    <BookmarkIcon />
  </Spinner>
  Bookmark
</Button>

더 알아보기 (Learn more)

Spinner는 Button의 loading prop과 결합해 로딩 상태를 자연스럽게 표현할 때 특히 유용해요.