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