Themes
Advanced
Utils
Components

Spinner

애니메이션 로딩 인디케이터를 표시합니다.

View sourceReport an issueView in Playground
<Spinner />

API Reference

이 컴포넌트는 span 요소를 기반으로 하며 common margin props를 지원합니다.

PropTypeDefault
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을 사용하여 스피너 또는 자식 요소가 표시되는지 제어합니다. 스피너는 숨겨질 때 자식의 치수를 유지하고 상호작용 요소를 비활성화합니다.

<Flex gap="4">

	<Spinner loading={true}>

		<Switch defaultChecked />

	</Spinner>



	<Spinner loading={false}>

		<Switch defaultChecked />

	</Spinner>

</Flex>

With buttons

Buttons에는 스피너를 자동으로 구성하는 자체 loading prop이 있습니다.

<Button loading>Bookmark</Button>

아이콘이 버튼 안에 있는 경우, 버튼의 disabled 상태를 사용하고 아이콘을 독립적인 <Spinner>로 감싸서 더 정교한 디자인을 구현할 수 있습니다.

<Button disabled>

	<Spinner loading>

		<BookmarkIcon />

	</Spinner>

	Bookmark

</Button>
PreviousSlider
NextSwitch
Edit this page on GitHub.