loading loading组件

渲染出一个loading

特别提示

3.0.0 版本后默认视图替换为lottie动画，实际预览效果请点击右侧”查看demo“，使用客户端扫码预览

安装

npm install @qnpm/q-loading --save --registry=http://npmrepo.corp.qunar.com

使用说明

显示代码

import Loading from '@qnpm/q-loading';

<Loading type="circle" />
<Loading
  type="fullCircle"
  customStyle={customStyle}
/>

显示代码

import Loading from '@qnpm/q-loading';

<Loading
    type="circle"
    showClose
    onClose={() => {}}
/>

显示代码

import Loading from '@qnpm/q-loading';

<Loading type="camel" />
<Loading type="fullCamel" />

属性说明

属性名 类型 默认值 是否必须 说明
customStyle Object - false 自定义样式，目前仅支持修改全屏loading的容器样式
onClose Function - false 关闭按钮点击回调
showClose boolean false false 是否展示关闭按钮（仅圆形loading支持）
text string | ReactElement<any> '加载中' false 动画下方文案
type circle|camel|fullCamel|fullCircle - false loading类型

type 说明

type共有以下几种类型：

'circle' // 圆形动画
'camel' // 小骆驼动画
'fullCamel' // 满屏loading
'fullCircle'; // 满屏loading
Label
Location