# @hi-ui/loading

> > TODO: description

Latest version **5.0.0** (published 2026-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hi-ui/loading
pnpm add @hi-ui/loading
yarn add @hi-ui/loading
bun add @hi-ui/loading
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-06-06 |
| First published | 2021-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 55.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 879 |
| Author | HiUI |
| Maintainers | sivan, solarjoker, lanzhi_lee, zhouyun |

## Links

- npm: https://www.npmjs.com/package/@hi-ui/loading
- Repository: https://github.com/XiaoMi/hiui
- Homepage: https://github.com/XiaoMi/hiui/tree/master/packages/ui/loading#readme
- Issues: https://github.com/XiaoMi/hiui/issues
- npm.io page: https://npm.io/package/@hi-ui/loading

## Dependencies (13)

- [@hi-ui/env](https://npm.io/package/@hi-ui/env.md) ^5.0.0
- [@hi-ui/portal](https://npm.io/package/@hi-ui/portal.md) ^5.0.0
- [@hi-ui/use-id](https://npm.io/package/@hi-ui/use-id.md) ^5.0.0
- [@hi-ui/spinner](https://npm.io/package/@hi-ui/spinner.md) ^5.0.0
- [@hi-ui/classname](https://npm.io/package/@hi-ui/classname.md) ^5.0.0
- [@hi-ui/container](https://npm.io/package/@hi-ui/container.md) ^5.0.0
- [@hi-ui/func-utils](https://npm.io/package/@hi-ui/func-utils.md) ^5.0.0
- [@hi-ui/use-latest](https://npm.io/package/@hi-ui/use-latest.md) ^5.0.0
- [@hi-ui/react-utils](https://npm.io/package/@hi-ui/react-utils.md) ^5.0.0
- [@hi-ui/react-compat](https://npm.io/package/@hi-ui/react-compat.md) ^5.0.0
- [@hi-ui/type-assertion](https://npm.io/package/@hi-ui/type-assertion.md) ^5.0.0
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^4.4.5
- [@hi-ui/use-merge-semantic](https://npm.io/package/@hi-ui/use-merge-semantic.md) ^5.0.0

## Recent versions

- 5.0.0 (latest) — 2026-06-06
- 5.0.0-rc.0 (rc) — 2026-06-02
- 5.0.0-experimental.1 (experimental) — 2026-03-08
- 5.0.0-canary.10 (canary) — 2026-03-08
- 5.0.0-alpha.0 (alpha) — 2025-09-29
- 4.1.0-beta.0 (beta) — 2022-12-01
- 4.0.0-beta.26 (feature) — 2022-07-13
- 5.0.0-experimental.0 — 2026-02-05
- 5.0.0-canary.9 — 2025-12-15
- 5.0.0-canary.8 — 2025-11-19
- 5.0.0-canary.7 — 2025-11-13
- 5.0.0-canary.6 — 2025-11-12
- 5.0.0-canary.5 — 2025-11-05
- 5.0.0-canary.4 — 2025-10-24
- 5.0.0-canary.3 — 2025-08-21
- … 70 more at https://npm.io/package/@hi-ui/loading/versions

## README

# Loading 动效加载

用于请求和数据加载成功的中间状态，缓冲用户的等待焦虑

## 何时使用

页面加载时

页面卡片、浮层面板加载时

## 使用示例

<!-- Inject Stories -->

## Props

| 参数    | 说明                   | 类型                | 可选值               | 默认值 |
| ------- | ---------------------- | ------------------- | -------------------- | ------ |
| size    | loading 的尺寸         | string              | 'lg' \| 'md' \| 'sm' | 'md'   |
| content | 自定义加载中状态的文案 | string \| ReactNode | -                    | -      |
| visible | 是否显示 loading       | boolean             | true \| false        | true   |
| full    | 是否全屏               | boolean             | true \| false        | false  |

## Methods

`Loading.open(target, { content, size, duration, key })`

| 参数     | 说明                                            | 类型                | 可选值               | 默认值 |
| -------- | ----------------------------------------------- | ------------------- | -------------------- | ------ |
| key      | 标识  `Loading`  的唯一 key，仅用于关闭         | string              | -                    | -      |
| target   | 需要  `Loading`  遮罩的元素, 当不传时为全屏遮罩 | HTMLElement         | -                    | -      |
| content  | 自定义加载中状态的文案                          | string \| ReactNode | -                    | -      |
| duration | loading 自动关闭的时间，单位为毫秒              | number              | -                    | -      |
| size     | loading 的尺寸                                  | string              | 'lg' \| 'md' \| 'sm' | 'md'   |

`Loading.close(key)`

| 参数 | 说明                        | 类型   | 可选值 | 默认值 |
| ---- | --------------------------- | ------ | ------ | ------ |
| key  | 标识  `Loading`  的唯一 key | string | -      | -      |

## CHANGELOG

| 参数      | 变更类型 | 变更内容 | 解决的问题 |
| --------- | -------- | -------- | ---------- |
| label     | feature  |          |            |
| container | feature  |          |            |
| delay     | feature  |          |            |

- `Loading.open` method 参数类型、个数改变

---
_Source: https://npm.io/package/@hi-ui/loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._