Spinner

A basic rotating figure indicating an in-progress state. The loading mask (LhLoading) renders it internally as well.

Basic usage

Sizes

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

Custom color

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

Attribute	Description	Type	Default
size	Size	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
color	Rotation color (CSS color value; inherits currentColor when unset)	string	—
sx	Quick layout props	LhSxProps	—

Accessibility

• Purely decorative: aria-hidden="true" removes it from the accessibility tree; the in-progress semantics belong to an outer container (e.g. role="status")
• The rotation respects prefers-reduced-motion, degrading to a static arc

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/spinner/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhSpinnerProps

export interface LhSpinnerProps {
  size?: LhSpinnerSize
  color?: string
  sx?: LhSxProps
}

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

export type LhSpinnerSize = (typeof LH_SPINNER_SIZE_CONST)[keyof typeof LH_SPINNER_SIZE_CONST]

Constants

Public constants used by this component (linked from the Type / Default columns in the Props table above):

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

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

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

export const LH_SPINNER_SIZE_PX: Record<LhSpinnerSize, number> = {
  small: 16,
  medium: 24,
  large: 32,
  mini: 12,
  'x-large': 40,
}