본문으로 건너뛰기

Spinner

Spinner 컴포넌트는 로딩 상태를 시각적으로 표시할 때 사용합니다. 네트워크 요청, 데이터 처리 등 비동기 작업이 진행 중임을 사용자에게 알려주는 데 적합합니다. 다양한 크기와 백드롭 옵션을 지원하며, 텍스트와 함께 사용할 수 있습니다.

인터랙티브 예제​

아래 UI에서 다양한 속성을 직접 변경하여 Spinner 컴포넌트의 모습을 확인해보세요.

sizeselect
스피너 크기를 선택합니다.
childrenstring
스피너 텍스트를 입력합니다.

기본 사용법​

import { Spinner } from '@ncds/ui-admin';

function App() {
  return <Spinner>로딩 중...</Spinner>;
}

Props​

PropTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg''md'스피너의 크기
color'primary' | 'white''primary'스피너의 색상
labelstring-스피너 아래에 표시될 텍스트

상세 예제 (Detailed Examples)​

다양한 크기​

백드롭 적용​



커스텀 태그로 텍스트 감싸기​

주의사항​

  1. children이 없으면 텍스트가 표시되지 않습니다.
  2. as prop을 사용해 텍스트를 감싸는 태그를 변경할 수 있습니다.
  3. hasBackdrop을 사용하면 스피너 뒤에 어두운 배경이 추가되어 모달 등에서 활용하기 좋습니다.
  4. size는 'xs', 'sm', 'md', 'lg', 'xl' 중 하나를 선택할 수 있습니다.