Spinner

Spinner (스피너)

어떤 작업이 처리되고 있다는 시각적 신호를 보여 주는 컴포넌트예요. 로딩 상태를 사용자에게 알려줄 때 쓰여요.

출처: 문서

본문

Spinner는 처리 중인 작업이 있음을 보여 주는 시각적 표시예요. <ExampleTabs name="spinner-basic" />

사용법 (Usage)

import { Spinner } from "@chakra-ui/react"

<Spinner />

예시 (Examples)

크기 (Sizes)

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

색상 (Colors)

colorPalette prop으로 스피너의 색상을 바꿀 수 있어요.

커스텀 색상 (Custom Color)

color prop으로 스피너에 커스텀 색상을 줄 수 있어요.

트랙 색상 (Track Color)

--spinner-track-color 변수로 스피너 트랙의 색상을 바꿀 수 있어요.

커스텀 속도 (Custom Speed)

animationDuration prop으로 스피너의 속도를 바꿀 수 있어요.

두께 (Thickness)

borderWidth prop으로 스피너의 두께를 바꿀 수 있어요.

커스텀 인디케이터 (Custom Indicator)

asChild prop으로 스피너 대신 커스텀 아이콘을 렌더링할 수 있어요.

라벨 (Label)

스피너에 라벨을 조합하면 추가적인 문맥을 제공할 수 있어요.

오버레이 (Overlay)

AbsoluteCenter 컴포넌트와 스피너를 조합하면 다른 컴포넌트 위에 스피너를 겹쳐 표시할 수 있어요.

Props

Spinner 컴포넌트의 Spinner 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.