加载状态按钮（提交中转圈/成功反馈三态切换源码）

效果演示（真实可交互）

点击按钮模拟提交：加载 2 秒后显示成功

完整代码

HTML 结构：

<button id="ls-btn" class="ls-btn" data-state="idle">
  <span class="ls-label">提交订单</span>
  <span class="ls-spinner" aria-hidden="true"></span>
  <span class="ls-check" aria-hidden="true">✓</span>
</button>

CSS 核心代码：

/* 转圈加载器 */
.ls-spinner {
  display: none; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: ls-spin .7s linear infinite;
}
.ls-btn[data-state="loading"] .ls-spinner { display: inline-block; }
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* 成功对勾：弹跳出现 */
.ls-check { display: none; transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.ls-btn[data-state="success"] .ls-check {
  display: inline-block; transform: scale(1);
}

JS 逻辑：

const btn = document.getElementById('ls-btn');
btn.addEventListener('click', () => {
  if (btn.dataset.state === 'loading') return;   // 防重复提交
  btn.dataset.state = 'loading';
  setTimeout(() => { btn.dataset.state = 'success'; }, 2000);
});

参数说明

兼容性与性能

• 转圈加载器用 border 圆角 + 旋转动画实现，无需引入任何图标库，兼容所有现代浏览器
• 状态切换只操作一个 data-state 属性和 display 属性，无重排重绘压力
• 动画只有 transform 旋转与缩放，全部由 GPU 合成，移动端流畅
• 建议配合真实请求使用：在 fetch 的 finally 中切换状态，并处理失败态（可扩展 data-state="error" 显示重试文案）

常见问题

Q: 怎么加一个「失败重试」状态？ 在 HTML 里加 <span class="ls-err">重试</span>，CSS 用 [data-state="error"] 控制显示，JS 里 catch 时把 state 设为 error 并恢复可点击即可。

Q: 防重复提交的原理是什么？ 点击后立即把 state 切到 loading，同时通过 CSS pointer-events: none 禁用按钮；JS 里再加一道 if (state === 'loading') return 双重保险。

Q: 加载文案和转圈能并存吗？ 可以，把转圈 <span> 放在按钮内并保留文字即可，本组件就是「提交订单 + 转圈」同时显示，宽度变化可用 min-width 固定。

Q: 能用在 Vue/React 里吗？ 可以，把状态提升为组件 state 或响应式变量，用条件渲染替代 data-state 选择器，CSS 部分完全复用。

Q: 按钮宽度会因文案变化而跳动吗？ 建议给按钮设置 min-width 并让三种文案长度接近；本组件将转圈和对勾内联在按钮内，宽度变化已被 min-width 吸收，不会跳动。