最可靠方式是用::after伪元素配合类名切换实现loading状态；需设button为position: relative以精确定位，用border-radius: 50%与透明边框模拟环形，动画避开rotate(360deg)陷阱，文字与图标显隐互斥，确保像素级精准。
纯 CSS 实现按钮点击后的 loading 状态，最可靠的方式是用 ::after 伪元素承载旋转动画，配合类名切换控制显隐——不新增 DOM、不影响语义、不依赖 JS 渲染逻辑。
为什么必须给按钮加 position: relative
伪元素默认脱离文档流，::after 要绝对定位到按钮中心，父容器必须有定位上下文。否则 top: 50%; left: 50% 会相对于最近的已定位祖先（可能是 body），导致加载环飘走。
- 没加
position: relative→ 加载环出现在页面左上角或错位 - 加了但按钮本身是
display: inline→ 宽高塌陷，top/left计算失效；应显式设display: inline-block或block - 若按钮用了 Flex 布局，
position: relative仍需保留，否则伪元素无法精确定位
::after 的尺寸与边框必须严格匹配
旋转环的视觉中心偏移，90% 出于 width/height 和 border-width 不一致。它不是“画圆”，而是靠正方形 + border-radius: 50% + 透明背景“裁出环形轮廓”。
- 设
width: 16px; height: 16px;→ 必须同步设border: 2px solid #007bff;，不能只写border: 2px;（缺颜色会透明） - 要制造“缺口感”，用
border-top-color: transparent;，而非删掉某一边——否则旋转时视觉节奏断裂 - 居中靠
margin: -8px 0 0 -8px;（半宽半高），若改尺寸，这个 margin 值必须同步重算
animation 关键帧必须避开 rotate(360deg) 插值陷阱
CSS 动画对 rotate(0deg) → rotate(360deg) 会做最短路径优化，实际可能不动或倒转一圈，尤其在循环多次后明显卡顿或跳帧。
- 错误写法：
@keyframes spin { to { transform: rotate(360deg); } }→ 浏览器可能直接跳过动画 - 正确写法：
@keyframes spin { to { transform: rotate(720deg); } }→ 强制走满两圈，视觉匀速稳定 - 别忘了加
transform-origin: center;，否则绕左上角转，不是绕自身中心 - 动画时长建议设
0.8s～1s，太快易眩晕，太慢显迟滞
状态切换时文字与加载环的显隐要互斥
loading 状态下，按钮文字不能和旋转环共存，否则布局挤压、可访问性下降、视觉混乱。
- 推荐结构：
<button class="btn"><span>提交</span></button>，用.btn.loading span控制文字透明度 - 设
.btn.loading span { opacity: 0; transition: opacity 0.15s ease; }，避免突兀消失 -
::after默认opacity: 0，loading 时设为1，并加相同transition保证淡入 - 禁用态也要同步处理：
.btn:disabled::after, .btn.loading:disabled应停掉动画并置灰，否则用户可能误判操作是否生效
真正难的不是让圆圈转起来，而是让它的大小、定位、旋转节奏、显隐过渡全部咬合在像素级精度上——少调一个 margin、漏写一个 transform-origin，就可能在某个屏幕缩放比例下偏移两像素，而这个细节，往往只有用户截图反馈时你才看得到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
