Loading 加载

用于页面或数据加载状态展示的动画组件

演示

9:41

代码示例

<!-- 默认加载 -->
  <re-loading class="demo-default" />

<!-- dots主题 -->
  <re-loading class="demo-dots" theme="dots" />

<!-- circular主题 -->
  <re-loading class="demo-circular" theme="circular" />

<!-- 带文字 -->
  <re-loading class="demo-text" text="加载中..." />

<!-- 自定义颜色 -->
  <re-loading class="demo-color" color="#e37318" text="自定义颜色" />

<!-- 自定义尺寸 -->
  <re-loading class="demo-size" size="60" text="尺寸60" />

<!-- 暂停动画 -->
  <re-loading class="demo-pause" :pause="true" text="已暂停" />

<!-- 反向旋转 -->
  <re-loading class="demo-reverse" :reverse="true" text="反向旋转" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-loading />。

API

Loading Props

名称	类型	默认值	描述	必传
text	`string`	""	加载提示文字	N
theme	`string`	"spinner"	加载动画主题，spinner旋转圆环、dots跳动圆点、circular进度环	N
size	`string`	"40"	加载动画尺寸	N
color	`string`	"#0052d9"	加载动画颜色	N
pause	`boolean`	false	是否暂停动画	N
reverse	`boolean`	false	是否反向旋转	N
duration	`number`	800	动画时长，单位毫秒	N
customStyle	`string`	""	自定义样式	N

Loading Events

名称	参数	描述
click	-	点击时触发

Loading Slots

名称	描述
-	-

内容锚点

演示
代码示例
引入
API