按钮点击后禁用交互、替换文字/图标并添加CSS旋转动画，推荐通过JS添加loading类控制状态，配合@keyframes实现平滑旋转，同时设置aria-busy和disabled确保可访问性与防重复提交。
用 HTML 按钮实现加载中的旋转动画，核心是：**按钮点击后禁用交互 + 替换文字/图标 + 添加 CSS 旋转动画**。不需要 JS 也能做基础效果，但配合 JS 更实用、更可控。
基础结构：HTML + 内联状态切换
最简方式是用一个按钮，通过添加类（如 loading）来切换状态：
<button id="submitBtn">提交</button>
点击后 JS 加 class，CSS 控制样式和动画。这是推荐做法，语义清晰、可维护性强。
CSS 旋转动画关键写法
旋转动画靠 @keyframes 和 transform: rotate() 实现。注意两点：
立即学习“前端免费学习笔记（深入）”；
- 用 border 或 clip-path + 伪元素模拟旋转圆圈，比纯文字旋转更专业
- 动画要设 animation: spin 1s linear infinite，避免卡顿；加 will-change: transform 提升性能
示例片段：
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-left: 8px;
}
JS 控制状态与防重复提交
点击按钮后立刻禁用、添加 loading 类，请求完成再恢复。关键细节：
- 用 btn.disabled = true 防止重复点击（比仅靠 CSS 更可靠）
- 恢复时记得同时移除 class、重置 innerText 或还原原始文案
- 建议封装成函数，比如 setLoading(btn, isLoading)，复用方便
简单调用示例：
btn.addEventListener('click', async () => {
setLoading(btn, true);
try {
await fetch('/api/submit', { method: 'POST' });
} finally {
setLoading(btn, false);
}
});
无障碍与用户体验小提醒
加载中按钮不能只靠视觉变化：
- 添加 aria-busy="true" 告诉读屏软件正在处理
- 保留按钮语义，别用 div + click 代替 button
- 旋转图标尺寸适中（14–18px），颜色对比度满足 WCAG 标准
不复杂但容易忽略。
