核心是防止重复提交、保持视觉反馈且不破坏可访问性；禁用 disabled 而改用 loading class + pointer-events: none，配合 aria-busy 和 transform 动画实现健壮加载态。
按钮点击后加 loading 状态，核心不是“让图标转起来”，而是防止重复提交 + 保持视觉反馈 + 不破坏可访问性。直接设 disabled 会导致 CSS 动画失效、屏幕阅读器跳过、hover 效果消失——这是最常踩的坑。
为什么不能直接用 disabled 控制 loading 态
浏览器对 disabled 元素有强干预：自动禁用 pointer events、强制灰化、丢弃所有 transition 和 :hover；部分 iOS Safari 还会忽略 aria-busy。更关键的是，它把“功能防护”和“视觉反馈”绑死在一起，没法单独控制旋转图标或文字切换。
- 改
disabled属性 →transition全部失效，opacity/filter 动画卡住 -
:hover和::after伪元素在disabled下不触发（尤其 Firefox） - 屏幕阅读器可能跳过该按钮，用户不知道“还在处理中”
- 无法在 loading 中保留焦点，影响键盘操作流
用 loading class + pointer-events: none 替代 disabled
保留原生表单防护（如 form.onsubmit 中 event.preventDefault()），但视觉层完全由 class 控制。这样 transition、伪元素、SVG 图标都能照常工作。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给按钮加
class="btn"，点击时添加loading类：btnEl.classList.add('loading') - CSS 中写：
.btn.loading { pointer-events: none; opacity: 0.7; filter: grayscale(20%); } - 用
::after或内联<svg></svg>渲染旋转图标，只对.btn.loading生效 - 必须同步设置
aria-busy="true"和aria-disabled="true"，兼顾读屏器
::after 旋转图标卡顿？检查是否触发了重排
伪元素动画卡顿，90% 是因为用了会触发 layout 的属性。比如 top/left、width/height、margin 动画，每帧都要重新计算位置和尺寸。
- 只用
transform: rotate()+opacity，这两者走合成层，GPU 加速 - 务必加
will-change: transform（现代浏览器仍建议保留） - 避免在
::after里写content: ""后又设display: block—— 改用display: inline-block或直接用transform: scale()隐藏 - 动画时长设为
0.8s～1.2s，太短像抽搐，太长让用户焦虑
JavaScript 控制 loading 状态的三个关键时机
loading 不是“点下去就开转”，而是一套状态机：开始请求 → 请求 pending → 请求结束（无论成功失败）。漏掉任一环节，loader 就会卡住或不出现。
- 在
fetch或axios调用前立即加loading类、设aria-busy - 不要等
then才关 loader —— 必须在finally块里移除类、恢复aria-busy="false" - 如果按钮本身是
<button type="submit"></button>，记得在form.onsubmit里event.preventDefault()，否则页面会刷新导致 loader 瞬间消失
真正难的不是让图标转起来，而是让 loading 状态和业务逻辑严丝合缝地咬合——网络超时、用户中途关闭 tab、服务端返回 4xx，这些场景下 loader 是否能及时收场，决定了用户会不会觉得“页面卡死了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
