Tui

Loading 加载

用于表示加载中状态，支持自定义颜色、文本及布局方式，常用于数据请求、异步处理等场景。

基础用法

默认圆形加载动画，可通过 color 属性修改颜色

示例代码

vue

<template>
  <TsLoading />
  <TsLoading color="blue" />
  <TsLoading color="#ff4d4f" />
</template>

加载文本

通过 text 属性设置描述性文本，增强状态表达

加载中...

正在提交

示例代码

vue

<template>
  <TsLoading text="加载中..." />
  <TsLoading text="正在提交" color="#fa8c16" />
</template>

居中展示

可通过外层容器进行居中控制，适用于全屏加载场景

页面加载中...

示例代码

vue

<template>
  <div style="display: flex; align-items: center; justify-content: center; height: 100px; background: #f8f8f8;">
    <TsLoading text="页面加载中..." color="#1890ff" />
  </div>
</template>

多类型加载动画

通过 type 属性切换加载动画样式。当前支持 dot 跳点动画和 bar 条形加载条，可搭配 text 与 color 使用。

加载中...

正在提交

示例代码

vue

<template>
  <TsLoading type="dot" text="加载中..." />
  <TsLoading type="bar" text="正在提交" color="#fa8c16" />
  <TsLoading type="wave" text="正在提交" color="#fa8c16" />
  <TsLoading type="moveRight" text="正在提交" color="#fa8c16" />
</template>

属性 Props

color

加载动画的颜色（支持 CSS 颜色值）

string

任意 CSS 支持的颜色值

var(--ts-color-primary)

text

加载描述文本

string

size

加载动画的尺寸, 仅对circular 生效

string

type

加载动画类型

string

circular / dot / bar / wave / moveRight

circular