::after伪元素配合类名切换是最轻量可控的loading实现方式，因其无需修改HTML、不依赖JS操作文本，且能避免文字跳变和实现叠加动画。
直接用 ::after 伪元素配合类名切换是最轻量、最可控的 loading 状态实现方式，不需要改 HTML 结构，也不依赖 JS 操作文本内容。
为什么不能只靠 content 动态替换文字
很多人想用 content: "提交"; → content: "加载中..."; 切换，但这样会引发两个实际问题：一是按钮宽度随文字长度跳变，破坏布局；二是无法同时显示文字和旋转动画（content 只能输出纯文本或简单符号，不支持内嵌 SVG 或 CSS 动画）。真正要的是「文字不动，叠加一个独立的加载环」——这必须靠伪元素定位实现。
::after 必须设 position: absolute 且显式指定宽高
常见错误是忘记给按钮加 position: relative，导致 ::after 脱离父容器定位，飘到页面左上角。另外，::after 默认是 inline 元素，width/height 和 transform 不生效，必须手动设为 display: inline-block 或 block。
- 按钮本身加
position: relative -
::after设content: ""、display: inline-block、width: 16px、height: 16px - 用
top: 50%+left: 50%+transform: translate(-50%, -50%)居中 - 边框用
border: 2px solid #007bff+border-top-color: transparent做缺口感
loading 类切换时要同步禁用交互与可访问性属性
仅视觉变化不够，用户点击后如果还能再点一次，可能触发重复请求。JS 添加 is-loading 类的同时，必须：button.disabled = true、设置 aria-busy="true"、移除 tabindex（或设为 -1）。
- CSS 中用
button.is-loading { pointer-events: none; }防止鼠标穿透 - 不要只靠
:disabled控制样式，因为disabled会重置部分继承样式（比如color可能被 UA 强制变灰） -
is-loading类应覆盖所有交互态：去掉:hover、:active效果，避免状态冲突
BEM 命名下 is-loading 修饰符必须和块名共存
写成 btn is-loading，不是单独的 is-loading 或 btn--loading。前者语义明确、作用域干净；后者容易被其他组件的同名类污染，或者在 JS 里判断状态时漏掉上下文。
- HTML 写法：
- CSS 选择器必须写成
.btn.is-loading::after，而不是.is-loading::after - 多个状态可叠加：
btn is-loading is-disabled，但需确保is-disabled的样式不意外覆盖is-loading的旋转动画
最易被忽略的是：伪元素的 z-index。如果按钮有阴影或背景渐变，::after 可能被盖住，必须显式设 z-index: 1 保证它浮在文字上方。还有，移动端 transform-origin 在某些 Android WebView 下会失效，统一写成 transform-origin: center 更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
