用::after在按钮内实现轻量级旋转spinner，需设position: relative、border+transparent构成圆环、animation无限旋转，并通过类名控制显隐，配合will-change和GPU加速优化性能。
用 ::before 或 ::after 实现按钮内嵌 spinner，别用额外 DOM 元素
伪元素加动画最轻量，不污染 HTML 结构，也避免 JS 控制显隐时的重排。关键在于把 ::after 定位在按钮内部中心，并用 border + transparent 做环形旋转体。
- 按钮需设
position: relative，否则伪元素无法绝对定位到按钮内 -
::after用border: 2px solid #007bff+border-top-color: transparent构成缺口圆环 - 动画必须用
animation: spin 1s linear infinite，不能只靠transform: rotate()静态值 - 加载中状态建议用类名控制，比如
.btn--loading，而不是靠 JS 动态增删伪元素
CSS 动画卡顿？检查 will-change 和硬件加速触发条件
小尺寸 spinner 在低端安卓或旧版 Safari 上容易掉帧，本质是浏览器没把它当作独立合成层处理。
- 给
::after加will-change: transform，但别滥用——仅在添加.btn--loading类时生效 - 确保
transform: rotate()动画里包含translateZ(0)或scale(1)，强制 GPU 加速（部分 Chrome 版本需要） - 避免在动画中同时修改
width/height或触发布局（layout），否则会退回到 CPU 渲染 - 测试时打开 Chrome DevTools → Rendering → “Paint flashing”，看 spinner 区域是否高频重绘
按钮文字被 spinner 盖住？用 padding 和 text-indent 动态避让
加载状态下，文字和 spinner 共存时容易重叠，尤其按钮宽度固定或文字较长时。
- 不要靠 JS 改
innerText来“显示 loading...”，那会破坏可访问性 - 用
text-indent: -9999px隐藏文字 +::before显示“Loading...”更可控（但注意屏幕阅读器兼容） - 更推荐方案：给
.btn--loading加padding-left: 28px（留出 spinner 宽度），再用::after绘制 spinner，文字自然右移 - 如果按钮含图标（如
），需额外设置pointer-events: none在 spinner 上，防止遮挡点击热区
IE11 兼容 spinner？放弃 @keyframes，改用 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=...)
IE11 不支持 transform: rotate() 动画，且 @keyframes 在它里面基本不可用。硬要兼容就得降级为“逐帧切换”的假动画，或直接静态图标。
- 别尝试用
-ms-transform+@-ms-keyframes，实测多数版本不触发 - 可用
filter搭配 JS 定时器每 100ms 切一次 rotation 值（0→1→2→3→0），但视觉卡顿明显 - 更实际的做法：用
@supports (animation-name: none)包裹现代动画，IE11 下 fallback 为纯色背景 + 文字变灰 + 禁用pointer-events - 如果项目已放弃 IE11，就别加任何 hack——现在连 Bootstrap 5 都不保了
伪元素 spinner 看似简单，但真正跑通全机型、全状态、可访问、可维护，得在定位逻辑、图层策略、文字流避让三处反复调参。动效只是表象，背后全是盒模型和渲染管线的博弈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
