直接设disabled会导致旋转卡住，因浏览器禁止在disabled元素上执行animation、:hover及伪元素，且屏幕阅读器跳过；正确方案是用loading类配合pointer-events:none、aria-busy和gpu加速transform动画实现视觉与交互解耦。
为什么直接设 disabled 会让旋转卡住
按钮点击后加 disabled，看似防重复提交，但立刻导致：transition 失效、:hover 消失、::after 伪元素不触发、屏幕阅读器跳过该按钮。更关键的是，Safari 和部分 Firefox 版本下，aria-busy 可能被忽略，用户完全感知不到“还在处理中”。这不是视觉问题，是交互链断裂。
loading 类 + pointer-events: none 怎么写
保留原生表单防护（比如在 form.onsubmit 中 event.preventDefault()），但视觉层完全交由 class 控制：
- 点击时立即执行：
btnEl.classList.add('loading') - CSS 中定义：
.btn.loading { pointer-events: none; opacity: 0.7; filter: grayscale(20%); } - 旋转图标用
::after或内联<svg></svg>，只对.btn.loading生效 - 同步设置：
btnEl.setAttribute('aria-busy', 'true')和btnEl.setAttribute('aria-disabled', 'true')
::after 画的旋转圆圈为啥转得卡
90% 是因为动画属性触发了重排。别用 top/left、width/height 或 margin 做动画——它们强制浏览器每帧重新计算布局。只用 transform: rotateZ(360deg) 和 opacity，这两者走合成层，GPU 加速。
- 必须加
will-change: transform到旋转元素上，尤其 iOS Safari -
transform-origin: center不可省，否则绕左上角转 - 动画时长设
0.8s～1.2s：太短像抽搐，太长让用户焦虑 - 边框圆环写法：
border: 4px solid transparent; border-top-color: #007bff;+border-radius: 50%
JS 控制 loading 状态的三个必踩节点
loading 不是“点下去就开转”，而是一套状态机，漏掉任一环节就会卡住或不出现：
- 在
fetch或axios.post()调用前，立刻加loading类、设aria-busy="true" - 不要等
.then()才关 loader —— 必须在.finally()里统一清除：btnEl.classList.remove('loading')、aria-busy="false" - 如果请求被 abort 或网络异常，也要进
finally，否则按钮永远停在 loading 态
最易忽略的是：没处理键盘操作（如回车提交）触发的 loading 状态，或没在 focus 状态下保留可访问性焦点。旋转本身不难，难的是让转和停都刚好卡在用户预期的位置上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
