Spinner (indicador giratorio)

Indicador giratorio básico que representa un estado en curso. En su interior, la máscara de carga (LhLoading) también lo utiliza para mostrarse.

Uso básico

Tres tamaños

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

Color personalizado

Color

<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

Prop	Descripción	Tipo	Predeterminado
size	Tamaño	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
color	Color de rotación (valor CSS color; si no se pasa, hereda currentColor)	string	—
sx	Props de maquetación rápida sx	LhSxProps	—

Accesibilidad

• El gráfico es puramente decorativo: con aria-hidden="true" se saca del árbol de accesibilidad; la semántica del estado en curso debe aportarla el contenedor exterior (p. ej. role="status")
• La animación de rotación respeta prefers-reduced-motion y degrada a un arco estático

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/spinner/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhSpinnerProps

export interface LhSpinnerProps {
  /** Tamaño */
  size?: LhSpinnerSize
  /** Color de rotación (valor CSS color; si no se pasa, hereda currentColor) */
  color?: string
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhSpinnerSize _{(de @lh-ui/share/core/spinner)}

/** Tamaño del indicador giratorio */
export type LhSpinnerSize = (typeof LH_SPINNER_SIZE_CONST)[keyof typeof LH_SPINNER_SIZE_CONST]

Constantes

Las constantes públicas que utiliza este componente son las siguientes (en la columna «Tipo / Predeterminado» de la tabla de Props puedes pulsar una entrada de igual nombre para saltar hasta aquí):

LH_SPINNER_SIZE_CONST _{(de @lh-ui/share/core/spinner)}

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

LH_SPINNER_SIZE_PX _{(de @lh-ui/share/core/spinner)}

/** Asignación tamaño → diámetro en px */
export const LH_SPINNER_SIZE_PX: Record<LhSpinnerSize, number> = {
  small: 16,
  medium: 24,
  large: 32,
  mini: 12,
  'x-large': 40,
}