Loading 加载中

何时使用

页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

注意事项

Loading 默认使用 display = 'inline-block' 布局的方式包裹内部元素。

如果希望 通栏包裹 可以修改 <Loading style={{display: 'block'}} />

基本用法

Loading demo...

最简单的用法。

APIs

Loading

参数说明类型默认值
tip自定义内容any-
size设置动画尺寸

可选值:
'large'(大号)
'medium'(中号)
Enum'large'
tipAlign自定义内容位置

可选值:
'right'(出现在动画右边)
'bottom'(出现在动画下面)
Enum'bottom'
visibleloading 状态, 默认 trueBooleantrue
indicator自定义动画any-
color动画颜色String-
fullScreen全屏展示Boolean-
children子元素any-
inlineshould loader be displayed inlineBooleantrue

Demo

自定义 Loading 动画

Loading demo...

你可以自定义动画,把自己的动画元素传进去, 需要自己写动画样式

关闭加载

Loading demo...

可切换加载状态。

全屏

Loading demo...

全屏展示

自定义提示语位置

Loading demo...

你可以选择提示语的位置,目前支持两个值 right/bottom(默认值)

Loading 动画尺寸

Loading demo...

设置Loading动画的尺寸,只对原生的indicator管用