Spinner 旋转加载器
Spinner 是内置的 SFC 自定义组件,以 Braille 点阵风格的旋转动画配合文字,向用户展示"正在处理"状态。相比 LoadingIndicator,Spinner 更轻量,可嵌入任意位置而不占满整个区域。
来源:内置 SFC 组件(
textual_vuepy/components/Spinner.vue),通过vtextual插件自动注册,无需手动导入。
基本用法
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text | str | "Loading..." | 旋转符号右侧显示的提示文字 |
interval | float | 0.1 | 动画每帧间隔,单位秒,越小旋转越快 |
running | bool | False | 是否运行动画;False 时组件静止(不显示),True 时启动旋转 |
style | str | "" | TCSS 样式字符串,覆盖组件默认样式 |
旋转字符序列:
⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏(Braille 点阵风格)
v-model
Spinner 无 v-model。通过 :running prop 控制动画启停,通过 :text prop 动态更新提示文字。
事件
| 事件 | 说明 |
|---|---|
| — | 无特殊事件 |
多步骤进度示例
与 ShimmerText 对比
| 特性 | Spinner | ShimmerText |
|---|---|---|
| 动画类型 | 旋转符号 | 文字流光高亮 |
| 占用空间 | 单行(紧凑) | 单行 |
| 适用场景 | 通用加载提示 | AI 生成、等待场景 |
| 文字动态 | 静态文字 + 旋转符 | 整段文字动态高亮 |
通用属性
所有 Textual-vuepy 组件均支持以下属性:
| 属性 | 类型 | 说明 |
|---|---|---|
id | str | 组件 CSS ID |
style | str | TCSS 内联样式 |
class | str | TCSS 类名(空格分隔) |
border_title | str | 边框标题 |
border_subtitle | str | 边框副标题 |