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

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

# Loading

Indicate that content is loading or an operation is in progress.

## Loading indicator


Loading

basic.tsx

Copy code

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

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

Expand code

## Sizes


Small

Medium

Large

sizes.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/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>Small</Text>
        <Loading size="sm" />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>Medium</Text>
        <Loading />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>Large</Text>
        <Loading size="lg" />
      </Flex>
    </Flex>
  );
}
```

Expand code

## Loading an area

Cover a content area while loading and restore interaction when finished.


Finish loading

**Leaf Garden**

See project details and recent updates here.

Edit project

overlay.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/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 ? 'Finish loading' : 'Start loading'}
      </Button>
      <Loading spinning={spinning} tip="Loading projects" delay={200}>
        <Card>
          <strong>Leaf Garden</strong>
          <p>See project details and recent updates here.</p>
          <Button variant="outline">Edit project</Button>
        </Card>
      </Loading>
    </Space>
  );
}
```

Expand code

## Loading API

| Property   | Type                   | Default | Description                   |
| ---------- | ---------------------- | ------- | ----------------------------- |
| `spinning` | `boolean`              | `true`  | Whether loading               |
| `size`     | `'sm' \| 'md' \| 'lg'` | `'md'`  | Indicator size                |
| `tip`      | `ReactNode`            | —       | Hint text                     |
| `delay`    | `number`               | `0`     | Display delay in milliseconds |
| `children` | `ReactNode`            | —       | Covered content               |

## Types

Import these types to define props or prepare data.

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

## Usage notes

Used alone, Loading displays an indicator. With children it covers the area and prevents interaction while visible. A delay prevents flicker for brief requests.