Skip to content

bash
npm install @hua-labs/hua
tsx
import { LoadingSpinner } from "@hua-labs/hua";

sm
md
lg
xl

default
primary
success
warning
error

Glass ()

size"sm" | "md" | "lg" | "xl""md"docs:components.loadingSpinner.props.size
variant"default" | "dots" | "bars" | "ring" | "ripple""default"docs:components.loadingSpinner.props.variant
textstring-docs:components.loadingSpinner.props.text
color"default" | "primary" | "secondary" | "success" | "warning" | "error" | "glass""default"docs:components.loadingSpinner.props.color
classNamestring-docs:components.loadingSpinner.props.className

docs:common.basicUsage
import { LoadingSpinner } from '@hua-labs/hua';

// Basic spinner
<LoadingSpinner />

// With text
<LoadingSpinner text="Loading..." />
docs:components.loadingSpinner.demo.variants
// Default (spinning circle)
<LoadingSpinner variant="default" />

// Bouncing dots
<LoadingSpinner variant="dots" />

// Animated bars
<LoadingSpinner variant="bars" />

// Ring spinner
<LoadingSpinner variant="ring" />

// Ripple effect
<LoadingSpinner variant="ripple" />
docs:common.colors
<LoadingSpinner color="primary" />
<LoadingSpinner color="success" />
<LoadingSpinner color="warning" />
<LoadingSpinner color="error" />

// Glass variant for overlays
<LoadingSpinner color="glass" />

  • aria-live: docs:components.loadingSpinner.accessibility.ariaLive
  • aria-label: docs:components.loadingSpinner.accessibility.ariaLabel
  • docs:common.accessibility.reducedMotion: docs:components.loadingSpinner.accessibility.reducedMotion