BUTTON
加载态按钮Loading Button
点击后按钮原地切换为转圈加载，完成后变绿色对勾——三态闭环的提交反馈。
效果预览
适合用在哪
所有异步提交：登录、支付、保存设置、发送表单。
容易踩的坑
- 加载时没设 disabled，用户连点两次就会重复下单或重复提交表单。
- 文案从「提交」变「处理中…」导致按钮宽度跳变，周围布局跟着抖动。
- 状态切换没有 aria-live 播报，读屏用户点完后听不到任何进度或结果。
设计提示词 · Prompt
加载态按钮（Loading Button）：三态流转——默认态（正常文案）；加载态（文字换成"处理中…"，左侧加 14-16px 的旋转圈：border:2px solid rgba(255,255,255,.3); border-top-color:#fff + rotate 动画，同时按钮降透明度到 .7-.8 并 disabled 防重复提交）；成功态（背景变绿色、文字换"已完成"、图标换对勾，1.5-2s 后复位或跳转）。三态之间宽度不要跳变——给按钮设 min-width 或预留最长文案的宽度。
Loading Button: three-state flow — default state (normal label); loading state (text changes to "Processing…", a 14-16px spinner on the left: border:2px solid rgba(255,255,255,.3); border-top-color:#fff + rotate animation, while the button drops to .7-.8 opacity and is disabled to prevent duplicate submissions); success state (background turns green, text changes to "Done", icon becomes a checkmark, then resets or redirects after 1.5-2s). Width must not jump between the three states — give the button a min-width or reserve the width of the longest label.
常见搭配
同一页面里经常和「加载态按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-loadwrap"> <button class="d-loadbtn"><span class="d-loadbtn__spin"></span>处理中…</button> <button class="d-donebtn">✓ 已完成</button> </div>