发起审批 · 底栏按钮加载态对比

模拟「暂存草稿 / 提交」点击后的等待反馈。点任意主按钮可预览约 2 秒加载态;选中喜欢的方案后告诉我编号即可落地。

现状问题:Vant :loading 默认会把按钮文字藏掉,中间只剩一个转圈,看起来像「按钮坏了 / 内容丢失」,而不是「正在处理」。 更好的做法一般是:保留语义文案(如「提交中…」),转圈可有可无、且应偏小、靠左。
A 现状 / 不推荐

文字消失 · 中间转圈

Vant 默认 loading:文案隐藏,只留 spinner。容易误以为按钮空白或出错。

表单区占位…

点「暂存草稿」或「提交」试效果

B 推荐

左侧小转圈 +「…中」文案

保留可读语义:暂存中… / 提交中…。转圈提示进度,文案说明在做什么。行业常见做法。

表单区占位…

点「暂存草稿」或「提交」试效果

C 轻量

只改文案 · 无转圈

「提交」→「提交中…」,按钮禁用。最干净,但进度感稍弱;短请求时够用。

表单区占位…

点「暂存草稿」或「提交」试效果

D 活泼

文案 + 跳动三点

「提交中···」三点依次闪动。无转圈、有动效,适合品牌感稍强的场景。

表单区占位…

点「暂存草稿」或「提交」试效果

E 动感

保留文案 · 光带扫描

文字不变(或改为「…中」),按钮表面扫光。进度感强,实现稍重一点。

表单区占位…

点「暂存草稿」或「提交」试效果

F 极简

保留文案 · 整体脉冲

文字改为「…中」,按钮透明度呼吸。实现最简单,但不够「明确在请求」。

表单区占位…

点「暂存草稿」或「提交」试效果

G 对比用

转圈压在字上

文字半透明仍在,转圈居中覆盖。比 A 稍好但仍挤、难读,一般不建议。

表单区占位…

点「暂存草稿」或「提交」试效果

当前选择:未选 建议优先试 B(小转圈 + 文案),短接口也可考虑 C。