# @rax-ui/loading

> Loading of Rax UI

Latest version **1.0.0-beta.62** (published 2020-11-24) · 0 weekly downloads

## Install

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

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.62 |
| Published | 2020-11-24 |
| First published | 2019-08-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | huya.nzb@alibaba-inc.com |
| Maintainers | lianmin, amdgigabyte, myronliu347 |
| Keywords | Rax, rax-component |

## Links

- npm: https://www.npmjs.com/package/@rax-ui/loading
- npm.io page: https://npm.io/package/@rax-ui/loading

## Dependencies (5)

- [rax-text](https://npm.io/package/rax-text.md) ^1.2.0
- [rax-view](https://npm.io/package/rax-view.md) ^1.1.0
- [rax-image](https://npm.io/package/rax-image.md) ^2.1.0
- [@rax-ui/styles](https://npm.io/package/@rax-ui/styles.md) ^1.0.0-beta.62
- [rax-unmount-component-at-node](https://npm.io/package/rax-unmount-component-at-node.md) ^1.0.0

## Recent versions

- 1.0.0-beta.62 (latest) — 2020-11-24
- 1.0.0-beta.47 (next) — 2020-04-17
- 1.0.0-beta.60 — 2020-08-28
- 1.0.0-beta.59 — 2020-08-18
- 1.0.0-beta.57 — 2020-06-22
- 1.0.0-beta.56 — 2020-06-03
- 1.0.0-beta.55 — 2020-05-26
- 1.0.0-beta.54 — 2020-05-13
- 1.0.0-beta.53 — 2020-05-12
- 1.0.0-beta.52 — 2020-05-11
- 1.0.0-beta.51 — 2020-04-29
- 1.0.0-beta.50 — 2020-04-27
- 1.0.0-beta.49 — 2020-04-23
- 1.0.0-beta.48 — 2020-04-23
- 1.0.0-beta.46 — 2020-04-15
- … 33 more at https://npm.io/package/@rax-ui/loading/versions

## README

---
display: Loading
family: other
---

# Loading

加载框


## API

### 函数式调用

适合全局页面的加载框

```jsx
import Loading from '@rax-ui/loading';

// 默认
Loading.show();

// 自定义
Loading.show({
  mask: true, // 默认 false
  content: '加载中', // 底部文案
  icon: 'https://img.alicdn.com/tfs/TB1aks3PpXXXXcXXFXXXXXXXXXX-150-150.gif', // 自定义加载动画图
});

// 关闭
Loading.hide();
```

### 组件式调用

适合区域的加载框

```jsx
import { createElement, useState, useEffect } from 'rax';
import Loading from '@rax-ui/loading';
import View from 'rax-view';
import Text from 'rax-text';

function App() {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setVisible(false);
    }, 5000);
  });

  return (
    <View>
      <Text>自定义内容</Text>
      <Loading visible={visible} content="加载中" />
    </View>
  );
}
```

### Props

|名称 | 说明 | 类型 | 默认值 |
|:---------------|:--------|:----|:----------|
| `visible` | 是否显示 | `boolean` | `false` |
| `mask` | 是否带有蒙层 | `boolean` | `false` |
| `icon` | 加载动画图 | `string` | [地址](https://img.alicdn.com/tfs/TB1Ep_9NVXXXXb8XVXXXXXXXXXX-74-74.gif) |
| `content` | 加载文案 | `string` ||


### CSS API

| 名称 | 说明 |
|:---------------|:--------|
| `loading` | 加载框 |
| `loading--mask` | 蒙层样式 |
| `loading__icon` | 加载动画图 |
| `loading__content` | 文案 |

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