> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/loading.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Loading 加载

提示内容正在加载或操作正在进行。

## 加载提示


正在加载

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/loading/basic.tsx"
import { Loading } from '@ifhover/leaf-ui';

export function LoadingBasic() {
  return <Loading tip="正在加载" />;
}
```

展开代码

## 不同尺寸


小尺寸

默认尺寸

大尺寸

sizes.tsx

复制代码

```tsx lineNumbers file="../../src/examples/loading/sizes.tsx"
import { Flex, Loading, Text } from '@ifhover/leaf-ui';

export function LoadingSizes() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Flex direction="column" gap="sm" align="start">
        <Text>小尺寸</Text>
        <Loading size="sm" />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>默认尺寸</Text>
        <Loading />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>大尺寸</Text>
        <Loading size="lg" />
      </Flex>
    </Flex>
  );
}
```

展开代码

## 区域加载

加载时覆盖内容区域，完成后恢复操作。


结束加载

**Leaf Garden**

在此查看项目概览和最近更新。

编辑项目

overlay.tsx

复制代码

```tsx lineNumbers file="../../src/examples/loading/overlay.tsx"
import { Button, Card, Loading, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function LoadingOverlay() {
  const [spinning, setSpinning] = useState(true);
  return (
    <Space direction="vertical" align="stretch">
      <Button variant="outline" onClick={() => setSpinning(!spinning)}>
        {spinning ? '结束加载' : '开始加载'}
      </Button>
      <Loading spinning={spinning} tip="正在读取项目" delay={200}>
        <Card>
          <strong>Leaf Garden</strong>
          <p>在此查看项目概览和最近更新。</p>
          <Button variant="outline">编辑项目</Button>
        </Card>
      </Loading>
    </Space>
  );
}
```

展开代码

## Loading API

| 属性         | 类型                     | 默认值    | 说明        |
| ---------- | ---------------------- | ------ | --------- |
| `spinning` | `boolean`              | `true` | 是否加载中     |
| `size`     | `'sm' \| 'md' \| 'lg'` | `'md'` | 图标尺寸      |
| `tip`      | `ReactNode`            | —      | 提示文字      |
| `delay`    | `number`               | `0`    | 延迟显示，单位毫秒 |
| `children` | `ReactNode`            | —      | 覆盖的内容     |

## 类型

可导入以下类型定义属性、组装数据或处理回调。

```ts
import type { LoadingProps } from '@ifhover/leaf-ui';
```

## 使用说明

独立使用展示加载提示；传入 `children` 后覆盖所在区域，并在显示加载层时阻止操作。`delay` 可避免短暂请求造成闪现。