Spinner スピナー

基本的な回転図形で、進行中の状態を表します。ローディングオーバーレイ（LhLoading）の内部表示にも使用されます。

基本的な使い方

3 つのサイズ

<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,
}