Loading

Display loading states with various animated indicators to show ongoing processes.

Import

import { Loading } from 'asterui'

Examples

Basic Loading

Default loading spinner.

import { Loading } from 'asterui'

function App() {
  return (
      <Loading />
    )
}

export default App

Loading Types

Different animation types for loading indicators.

import { Loading, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center" wrap>
        <Loading type="spinner" />
        <Loading type="dots" />
        <Loading type="ring" />
        <Loading type="ball" />
        <Loading type="bars" />
        <Loading type="infinity" />
      </Space>
    )
}

export default App

Sizes

Control loading indicator size.

import { Loading, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center">
        <Loading size="xs" />
        <Loading size="sm" />
        <Loading size="md" />
        <Loading size="lg" />
      </Space>
    )
}

export default App

Colors

Different color variants for loading indicators.

import { Loading, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center" wrap>
        <Loading color="primary" />
        <Loading color="secondary" />
        <Loading color="accent" />
        <Loading color="neutral" />
        <Loading color="info" />
        <Loading color="success" />
        <Loading color="warning" />
        <Loading color="error" />
      </Space>
    )
}

export default App

API

`Loading`

Property	Description	Type	Default
`size`	Loading indicator size	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`type`	Loading animation type	`'spinner' \| 'dots' \| 'ring' \| 'ball' \| 'bars' \| 'infinity'`	`'spinner'`
`color`	Loading indicator color	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'`	`'primary'`
`className`	Additional CSS classes	`string`	-
`data-testid`	Test ID for testing	`string`	-

Accessibility

Uses aria-label to describe loading state
Animation can be paused by users who prefer reduced motion
Ensure loading indicators are paired with text for screen readers when possible