# xy-loading-react
> 英语不好，文档里的英文版是谷歌翻译的，如果不准确请见谅
>
> xy-loading-react是一个为react项目提供多种样式的loading动画和加载占位图的模块
>
> loading动画/加载占位图样式会持续增加，欢迎补充和提需求
> English is not good, the English version of the document is Google translation, if not accurate, please forgive me
>
> xy-loading-react is a multi-style loading animation for react projects and a module for loading bitmaps
>
> loading animation / loading bitmap style will continue to increase, are welcome to add and demand
### 安装 Installation
```sh
$ npm i xy-loading-react --save
```
### 使用 Usage
```js
// 引入 Introduced
import XyLoading from 'xy-loading-react';
// 调用 transfer
```
### 参数 Available Props
| prop | 类型 type | 默认值 default value | 说明 description |
| ---------- | ------- | ----------------- | ------------------ |
| type | string | skeleton1 | Loaidng动画和加载占位图的类型 |
| visibility | bool | true | 该组件是否可见 |
### 例子 examples
```js
import React from 'react';
import XyLoading from 'xy-loading-react';
export default class MyComponent extends React.Component{
constructor(props,that) {
super(props);
this.state = {
loadingVisibility:true,
};
}
componentWillMount(){
// 在数据请求完毕后，修改state中XyLoading的可见性
// After the data request is completed, modify the visibility of XyLoading in state
this.setState({
loadingVisibility:false,
})
}
render(){
// 根据state中的loadingVisibility判断数据是否加载完毕
// 若加载完则正常显示内容，若未加载完则显示XyLoading
// According to loadingVisibility state to determine whether the data is loaded
// If loaded finished the normal display, if not loaded then display XyLoading
if(!this.state.loadingVisibility){
return (
{this.state.content}
)
}else{
return (
)
}
}
}
```
### type参数效果预览 type parameter effect preview
#### 骨架图类型 Skeleton graph type
| | | | |
| :--------------------------------------: | :--------------------------------------: | :--------------------------------------: | :--------------------------------------: |
|  |  |  |  |
| skeleton1 | skeleton2 | skeleton3 | skeleton4 |