# Loading 加载

[toc]

`Loading` 组件用于当前区域正在进行数据获取或处理时，用来提示等待状态。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-loading": "../dist/loading/index"
  }
}

```

## 用法

### 加载图标类型

通过 `variant` 属性设置加载图标类型，默认为 `circular`。

```html
<tea-loading variant="spinner"></tea-loading>
```

### 加载图标大小

通过 `iconSize` 属性设置加载图标大小，默认为 `20px`，单位仅支持 `px`。

```html
<tea-loading iconSize="32"></tea-loading>
```

### 加载图标颜色

通过 `iconColor` 属性设置加载图标颜色。

```html
<tea-loading variant="spinner" iconColor="#006EFF"></tea-loading>
```

### 加载文案大小

通过 `textSize` 属性设置加载文案大小，默认为 `14px`，单位仅支持 `px`。

```html
<tea-loading variant="spinner" textSize="12">加载中...</tea-loading>
```

### 加载文案颜色

通过 `textColor` 属性设置加载文案颜色。

```html
<tea-loading variant="spinner" textColor="#888888">加载中...</tea-loading>
```

### 垂直排列布局

通过 `vertical` 属性来展示垂直排列图标和文字内容。

```html
<tea-loading variant="spinner" vertical>加载中...</tea-loading>
```

## Props

| 参数        | 描述                | 类型        | 默认值        | 可选值                       |
| --------- | ----------------- | --------- | ---------- | ------------------------- |
| variant   | 加载图标类型            | `String`  | `circular` | `["circular", "spinner"]` |
| iconSize  | 加载图标大小，默认单位为 `px` | `Number`  | `20`       | -                         |
| iconColor | 加载图标颜色            | `String`  | -          | -                         |
| textSize  | 加载文案大小，默认单位为 `px` | `Number`  | -          | -                         |
| textColor | 加载文案颜色            | `String`  | -          | -                         |
| vertical  | 是否垂直排列图标和文字内容     | `Boolean` | `false`    | -                         |

## Slots

| 名称  | 描述   |
| --- | ---- |
| -   | 加载文案 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                                 | 默认值               | 描述  |
| ----------------------------------- | ----------------- | --- |
| loading-text-color                  | @text-light-color | -   |
| loading-text-size                   | @font-size-sm     | -   |
| loading-text-margin                 | @margin-xs        | -   |
| loading-circular-animation-duration | .6s               | -   |
| loading-spinner-animation-duration  | 1.2s              | -   |