Loading Spinner

@hua-labs/ui

v1.1.0

다양한 스타일로 로딩 상태를 표시하는 애니메이션 스피너 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { LoadingSpinner } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 스피너

로딩 중...

애니메이션 변형

기본

점

막대

링

리플

크기

색상

default

primary

success

warning

error

Glass (오버레이용)

잠시만 기다려주세요...

텍스트와 함께

로딩 중...

요청을 처리 중입니다...

잠시만 기다려주세요...

Props

이름	타입	기본값	설명
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	스피너 크기
`variant`	`"default" \| "dots" \| "bars" \| "ring" \| "ripple"`	`"default"`	애니메이션 타입
`text`	`string`	-	스피너 아래 표시할 텍스트
`color`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "error" \| "glass"`	`"default"`	스피너 색상
`className`	`string`	-	추가 CSS 클래스

코드 예시

기본 사용법

import { LoadingSpinner } from '@hua-labs/ui';

// Basic spinner
<LoadingSpinner />

// With text
<LoadingSpinner text="Loading..." />

애니메이션 변형

// Default (spinning circle)
<LoadingSpinner variant="default" />

// Bouncing dots
<LoadingSpinner variant="dots" />

// Animated bars
<LoadingSpinner variant="bars" />

// Ring spinner
<LoadingSpinner variant="ring" />

// Ripple effect
<LoadingSpinner variant="ripple" />

색상

<LoadingSpinner color="primary" />
<LoadingSpinner color="success" />
<LoadingSpinner color="warning" />
<LoadingSpinner color="error" />

// Glass variant for overlays
<LoadingSpinner color="glass" />

접근성

•aria-live: 컨테이너가 알림을 위해 aria-live 사용
•aria-label: 스피너가 스크린 리더를 위해 aria-label 사용
•모션 감소: prefers-reduced-motion 설정 존중

Progress EmptyState