Loading 加载
用于表示加载中状态，支持自定义颜色、文本及布局方式，常用于数据请求、异步处理等场景。
基础用法
默认圆形加载动画，可通过 color 属性修改颜色。
<template>
<div class="component-card-demo-wrap loading-demo-base">
<TsLoading />
<TsLoading color="blue" />
<TsLoading color="#ff4d4f" />
</div>
</template>
<script setup lang="ts">
import { TsLoading } from 'tui';
</script>
<style scoped>
.loading-demo-base {
width: 100%;
gap: 24px;
}
</style>
加载文本
通过 text 属性设置描述性文本，增强状态表达。
<template>
<div class="component-card-demo-wrap loading-demo-text">
<TsLoading text="加载中..." />
<TsLoading text="正在提交" color="#fa8c16" />
</div>
</template>
<script setup lang="ts">
import { TsLoading } from 'tui';
</script>
<style scoped>
.loading-demo-text {
width: 100%;
gap: 24px;
}
</style>
多类型加载动画
通过 type 属性切换加载动画样式，支持 dot、bar、wave、moveRight，可搭配 text 与 color 使用。
<template>
<div class="component-card-demo-wrap loading-demo-type">
<TsLoading type="dot" text="加载中..." color="#fa8c16" />
<TsLoading type="bar" text="正在提交" color="#fa8c16" />
<TsLoading type="wave" text="正在提交" color="#fa8c16" />
<TsLoading type="moveRight" text="正在提交" color="#fa8c16" />
</div>
</template>
<script setup lang="ts">
import { TsLoading } from 'tui';
</script>
<style scoped>
.loading-demo-type {
gap: 24px;
}
</style>