# loading 加载提示组件

> popup是一个加载提示组件

[demo](demo/components/loading.html ':ignore')

## 使用方法

```
<div>
    <loading :show="show" :layer="true">
        <!--加载图标-->
        <img src="https://loading.io/spinners/spinner/thumb.png">
        <span>正在加载</span>
    </loading>
    <div>内容</div>
</div>
```

```
import {Loading} from 'vivo-ui';

export default {
    components: {
        Loading
    }
};
```

## 属性

名称|类型|必填|默认值|描述
:-:|:-:|:-:|:-:|:-:
show|`Boolean`|`N`|`false`|是否显示
layer|`Boolean`|`N`|`true`|是否有遮罩层
speed|`Number`&#124;` String`|`N`|`normal`|淡入淡出速度，单位ms，`0`表示无淡入淡出效果；String类型只支持`fast`,`normal`,`slow`三个值
appear|`Boolean`|`N`|`false`|初始渲染时是否淡入
background|`String`|`N`|`rgba(0,0,0,0.6)`|遮罩层背景色

## 插槽

名称|必填|说明
:-:|:-:|:-:
默认|`N`|loading图标，提示文案区域

## 注意

**loading组件会默认将父元素设置成相对定位**