Loading

显示带各种动画指示器的加载状态，以显示正在进行的过程。

导入

import { Loading } from 'asterui'

示例

基础加载

默认的加载旋转器。

import { Loading } from 'asterui'

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

export default App

加载类型

加载指示器的不同动画类型。

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

尺寸

控制加载指示器尺寸。

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

颜色

加载指示器的不同颜色变体。

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`

属性	描述	类型	默认值
`size`	加载指示器尺寸	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`
`type`	加载动画类型	`'spinner' \| 'dots' \| 'ring' \| 'ball' \| 'bars' \| 'infinity'`	`'spinner'`
`color`	加载指示器颜色	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'error'`	`'primary'`
`className`	额外的 CSS 类名	`string`	-
`data-testid`	用于测试的测试 ID	`string`	-

无障碍

使用 aria-label 描述加载状态
喜欢减少动画的用户可以暂停动画
确保加载指示器在可能的情况下与文本配对供屏幕阅读器使用