# Loading
用于页面和区块的加载中状态。
## Usage
### Basic
```tsx
import React, { useState } from 'react'
import { Loading, Button } from 'react-icecream'
export default () => {
const [loading, setLoading] = useState(true)
return (
<>
Hello world.
Hello world.
{loading ?
:
Hello world.
}
)
}
```
### 行内需求
```tsx
import React, { useState } from 'react'
import { Loading, LoadingProps, Button } from 'react-icecream'
function InlineLoading(props: LoadingProps) {
return (
)
}
export default () => {
const [loading, setLoading] = useState(true)
return (
<>
Hello Icecream world.
My name is Loading.
Now is {loading ? : new Date().toLocaleTimeString()}.
My description is {'very '.repeat(100)}long.
)
}
```
### 撑满父容器并居中
```tsx
import React, { useState } from 'react'
import { Loading, Button } from 'react-icecream'
function CoverLoading(props: LoadingProps) {
return (
)
}
export default () => {
const [loading, setLoading] = useState(true)
return (
<>
{loading ?
:
Hello world.
}
)
}
```
### Loading 动画最大高度只有 200px
```tsx
import React from 'react'
import { Loading, Button } from 'react-icecream'
export default () => {
const renderContent = (height: number) => (
有遮罩 鼠标不能点击
)
return (
<>
无 children 示例：
有 children 示例：
{renderContent(400)}
{renderContent(200)}
)
}
```
### Loading 嵌套 Loading
```tsx
import React, { useState } from 'react'
import { Loading, Button } from 'react-icecream'
export default () => {
const [outerLoading, setOuterLoading] = useState(false)
const [innerLoading, setInnerLoading] = useState(true)
return (
<>
Hello
inner
world.
)
}
```