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