纯css按钮加载态最稳妥方案是用伪元素::after实现旋转环，需设position: relative、宽高相等、border-radius: 50%、transform-origin: center及精准居中定位。
按钮点击后显示旋转加载圆圈的CSS实现原理
本质是用 border 模拟环形，靠 border-radius: 50% 和 animation: spin 驱动旋转。不是用 SVG 或伪元素“画”圆，而是让一个带边框、无内容的正方形元素，在圆形裁剪下只露出边框——就成了实心圆环。关键不在“圆”，而在“边框+旋转+透明背景”的组合。
如何用纯CSS给按钮添加加载态（不改HTML结构）
最稳妥的方式是复用按钮本身，通过类名切换状态，用 ::after 伪元素承载加载动画，避免影响原有文字布局。需注意：伪元素默认不继承 display: inline，必须显式设为 inline-block 或 block，否则旋转会失效或错位。
- 给按钮加
position: relative，让::after可以绝对定位居中 -
::after设content: ""、width: 16px、height: 16px、border: 2px solid #007bff、border-top-color: transparent（制造缺口感，更像加载） - 用
border-radius: 50%把它变成环形，再加animation: spin 0.8s linear infinite - 加载时隐藏原文字：
.btn.loading > span（假设文字包在<span></span>里）设opacity: 0，同时::after设opacity: 1
常见错误：旋转卡顿、偏移、不居中
问题几乎都出在尺寸和定位没对齐。比如 border-width 变了但 width/height 没同步调，导致视觉中心漂移；或者动画用了 transform: rotate() 却忘了加 transform-origin: center，结果绕左上角转。
- 务必确保
width === height，且border-width * 2 ，否则圆环会被截断 - 动画定义里必须包含
transform-origin: center，否则默认是左上角 - 避免在
::after上用margin: auto居中——它在绝对定位下无效；改用top: 50%; left: 50%; transform: translate(-50%, -50%) - 如果按钮有
padding，伪元素的top/left值要减去 padding 影响，或直接用inset: 0+margin: auto（仅支持现代浏览器）
兼容性与性能注意点
@keyframes spin 在 IE10+ 和所有现代浏览器都支持，但 IE 对 transform-origin 的解析有偏差，建议用 50% 50% 而非 center。动画本身开销低，但若页面存在大量同类按钮同时加载，应避免全部启用动画——可用 will-change: transform 提前提示渲染引擎，或用 animation-play-state: paused 按需激活。
- IE10/11 不支持
inset，居中必须写死top/left+transform - 不要给加载态按钮加
pointer-events: none后又忘了在 JS 中手动禁用点击——CSS 禁用不等于逻辑禁用 - 移动端要注意
touch-action: manipulation可能干扰点击反馈，加载态下建议显式设为auto
实际项目里最容易漏的是伪元素的 z-index 和 visibility 切换时机：加载开始时立刻 show，结束时等动画帧完成再 hide，否则会看到“闪一下”。这个细节没法靠 CSS 自动处理，得靠 JS 控制类名增删节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
