Loading 加载

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

开发指南

注意事项

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

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

LTR
加载中...
加载中...
test
RTL
加载中...
加载中...
test

基本用法

最简单的用法。

default animation
default animation
test
loading...
test

自定义Loading动画

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

关闭加载

可切换加载状态。

全屏

全屏展示

default
default
test
right
right
test
bottom
bottom
test

自定义提示语位置

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

normal(size default medium)
normal(size default medium)
test
large
large
test
medium
medium
test

Loading动画尺寸

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

API

Loading

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

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

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