> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/loading-bar.html

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

# LoadingBar

Show page or task loading progress.

## Basic usage


Simulate page loading

basic.tsx

Copy code

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

export function LoadingBarBasic() {
  const bar = useLoadingBar();
  return (
    <Button
      onClick={() => {
        const done = bar.start();
        setTimeout(done, 1600);
      }}
    >
      Simulate page loading
    </Button>
  );
}
```

Expand code

## More examples


40% progressFinishReset

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/loading-bar/advanced.tsx"
import { Button, Space, useLoadingBar } from '@ifhover/leaf-ui';

export function LoadingBarProgress() {
  const bar = useLoadingBar();
  return (
    <Space>
      <Button
        variant="outline"
        onClick={() => {
          bar.reset();
          bar.start();
          bar.set(40);
        }}
      >
        40% progress
      </Button>
      <Button onClick={() => bar.finish()}>Finish</Button>
      <Button variant="soft" onClick={() => bar.reset()}>
        Reset
      </Button>
    </Space>
  );
}
```

Expand code

## Usage

ConfigProvider provides the bar. start() returns the completion function for that task; call it in finally. Concurrent tasks keep the bar active until all finish.

## Types

Import these types for data, callbacks and refs.

```ts
import type { LoadingBarApi, LoadingBarProps, LoadingBarProviderProps } from '@ifhover/leaf-ui';
```

## LoadingBarApi API

| Property | Type                         | Default  | Description                                   |
| -------- | ---------------------------- | -------- | --------------------------------------------- |
| `start`  | `() => () => void`           | Required | Start a task; returns its completion function |
| `finish` | `() => void`                 | Required | Finish one task; hide after all finish        |
| `set`    | `(progress: number) => void` | Required | Set displayed progress                        |
| `reset`  | `() => void`                 | Required | Reset or retry                                |

## LoadingBarProps API

| Property    | Type                | Default | Description                                |
| ----------- | ------------------- | ------- | ------------------------------------------ |
| `active`    | `boolean`           | `false` | Loading is active                          |
| `progress`  | `number`            | —       | Progress 0–100; omitted estimates progress |
| `color`     | `string`            | —       | Color                                      |
| `height`    | `number`            | `3`     | Height, numbers are in pixels              |
| `position`  | `'top' \| 'bottom'` | `'top'` | Display or insertion position              |
| `className` | `string`            | —       | Container class name                       |
| `style`     | `CSSProperties`     | —       | Container inline styles                    |

## LoadingBarProviderProps API

| Property    | Type                | Default | Description                   |
| ----------- | ------------------- | ------- | ----------------------------- |
| `color`     | `string`            | —       | Color                         |
| `height`    | `number`            | `3`     | Height, numbers are in pixels |
| `position`  | `'top' \| 'bottom'` | `'top'` | Display or insertion position |
| `className` | `string`            | —       | Container class name          |
| `style`     | `CSSProperties`     | —       | Container inline styles       |
| `children`  | `ReactNode`         | —       | Content or child items        |