Spinner 加载
表示不确定等待的旋转指示器
用法
基础
示例加载中...
尺寸
size 设置宽高（px）。
示例加载中...
显隐切换
visible 带内置的进出场过渡；v-if 直接挂载或卸载。
示例加载中...
行内等待
用于按钮、行内状态或遮罩内部的短等待。
示例加载中...
最佳实践
- 只用于不确定的短等待；有数值或阶段进度时用
TxProgressBar，整块首屏加载用TxLoadingState。 - 文案放在图标旁边；Spinner 只表达忙碌，不表达完成结果。
- 需要内置进出场过渡时用
visible；挂载时机由宿主管理时用v-if。 - 只有 CSS 动效不适合受限表面时才设置
fallback。 - 着色时直接在
TxSpinner上设置color；父级的color不会穿透根节点。
API 参考
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | number | 16 | 宽高（px），写入 --tx-spinner-size。 |
strokeWidth | number | 2 | 环形与 SVG 的线宽，写入 --tx-spinner-stroke。 |
fallback | boolean | false | 渲染 SVG 旋转圆环，替代默认的 ball/ring 动效。 |
visible | boolean | true | 显示或隐藏，带 tx-spinner-visibility 过渡。 |
label | string | 'Loading' | 状态区域的可访问名，出现时被播报；本地化时覆盖。 |
概述
- 根节点是 inline-flex 的
span，带role="status"、aria-busy="true"、aria-live="polite"，以label作为aria-label；不播报完成。 visible=false时，离场过渡结束后不再渲染。fallback渲染 SVG circle，沿用size与strokeWidth。- 根节点默认取
--tx-text-color-secondary作为颜色。
技术实现
- 源码：
packages/tuffex/packages/components/src/spinner/。
查看源码
packages/tuffex/packages/components/src/spinner/index.ts