Spinner 회전 그래픽

진행 중인 상태를 나타내는 기본 회전 그래픽입니다. 로딩 오버레이(LhLoading) 내부에도 동일하게 표시됩니다.

기본 사용법

세 가지 크기

<script setup lang="ts">
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner size="small" />
    <LhSpinner size="medium" />
    <LhSpinner size="large" />
  </div>
</template>

커스텀 색상

색상

<script setup lang="ts">
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner color="#8f9779" />
    <LhSpinner color="#b55442" />
    <LhSpinner color="#4a6fa5" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div class="demo-spinner-row">
    <LhSpinner color="#8f9779" />
    <LhSpinner color="#b55442" />
    <LhSpinner color="#4a6fa5" />
  </div>
</template>

API

LhSpinner Props

프로퍼티	설명	타입	기본값
size	크기	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
color	회전 색상 (CSS color 값, 전달하지 않으면 currentColor를 상속)	string	—
sx	sx 빠른 레이아웃 속성	LhSxProps	—

무장애

• 그래픽은 순수 장식이며 aria-hidden="true"로 무장애 트리에서 제외됩니다. 진행 중 상태의 의미는 외부 컨테이너(예: role="status")가 담당해야 합니다
• 회전 동작은 prefers-reduced-motion을 존중하여 정적인 반원형으로 대체됩니다

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다 (packages/components/spinner/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 프로퍼티 설명은 위쪽 Props 표를 참조하세요):

LhSpinnerProps

export interface LhSpinnerProps {
  /** 크기 */
  size?: LhSpinnerSize
  /** 회전 색상 (CSS color 값, 전달하지 않으면 currentColor를 상속) */
  color?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhSpinnerSize _{(출처: @lh-ui/share/core/spinner)}

/** 회전 그래픽 크기 */
export type LhSpinnerSize = (typeof LH_SPINNER_SIZE_CONST)[keyof typeof LH_SPINNER_SIZE_CONST]

상수

이 컴포넌트에서 사용하는 공개 상수는 다음과 같습니다 (Props 표의 「타입 / 기본값」 열에서 동일한 이름의 항목을 클릭하면 이곳으로 이동합니다):

LH_SPINNER_SIZE_CONST _{(출처: @lh-ui/share/core/spinner)}

export const LH_SPINNER_SIZE_CONST = {
  ...LH_SIZE_CONST,
} as const

LH_SPINNER_SIZE_PX _{(출처: @lh-ui/share/core/spinner)}

/** 크기 → 지름 px 매핑 */
export const LH_SPINNER_SIZE_PX: Record<LhSpinnerSize, number> = {
  small: 16,
  medium: 24,
  large: 32,
  mini: 12,
  'x-large': 40,
}