最简纯css圆环spinner方案是用等宽高元素+transparent边框+border-radius:50%模拟空心环，配合linear无限旋转动画；伸缩需与旋转同周期组合transform；border方案兼容性远优于clip-path。
用 border + animation 实现圆环旋转最简方案
纯 CSS 圆环 Spinner 的核心不是画个圆，而是利用元素的 border 边框 + transparent 配合 border-radius: 50% 模拟空心圆环。旋转靠 @keyframes 改变 transform: rotate()，不需要任何 HTML 元素嵌套或伪元素叠加。
常见错误是直接给 div 设 width/height 和 border 却忘了设 border-radius: 50%，结果出来是方框带四角边框；或者用了 outline，但 outline 不支持 border-radius，无法成圆。
-
width和height必须相等，否则椭圆 -
border宽度决定环粗细，border-color只设一个色，其余三边用transparent（例如border: 4px solid transparent; border-top-color: #007bff;） - 动画必须加
animation-timing-function: linear，否则默认ease会让转速不均、有顿挫感
@keyframes spin {
to { transform: rotate(360deg); }
}
.loader {
width: 32px;
height: 32px;
border: 3px solid transparent;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
让圆环同时伸缩：叠加 scale() 动画的关键时机
单纯叠加两个 transform（比如 rotate() 和 scale()）在同一个 @keyframes 里可行，但容易失控：缩放中心点偏移、缩放节奏和旋转不同步、视觉上像“晃动”而非呼吸感。
真正可控的做法是把伸缩逻辑拆进同一组关键帧，用 transform: rotate() scale() 组合写死每一帧，确保两者相位对齐。重点在于缩放幅度要小（scale(0.95) ~ scale(1.05)），且周期与旋转一致（比如都用 1.2s），否则会感觉“转得快、缩得慢”。
- 不要用两个独立
animation属性叠加，浏览器渲染时可能不同步 - 缩放中心默认是元素中心，无需额外设
transform-origin（除非你故意要偏移） - 如果想让“缩”发生在旋转到某角度时（比如顶部最亮），就得手写多段
from/to或用0%, 25%, 50%, 75%, 100%显式控制
@keyframes spin-pulse {
0% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(90deg) scale(0.97); }
50% { transform: rotate(180deg) scale(1.03); }
75% { transform: rotate(270deg) scale(0.97); }
100% { transform: rotate(360deg) scale(1); }
}
border 方案 vs clip-path 方案的兼容性取舍
用 clip-path: circle() 配合 background 也能做出圆环动画，但实际项目中基本不推荐——clip-path 在 Safari 旧版本（iOS 15.4 之前）、IE 和部分安卓 WebView 中支持极差，且动画性能不如 border 稳定（重绘开销大）。
而 border 方案从 IE9 开始就完全支持，所有现代浏览器无差异。唯一限制是：它本质是“单色环”，不能直接实现渐变环或虚线环。如果真需要渐变，得用 conic-gradient 背景 + mask，但那已超出“纯 CSS 简单 Spinner”的范畴，也失去兼容性优势。
- 要兼容 iOS 14/iPadOS 14？坚持用
border+transparent - 若只跑 Chrome 110+ 且明确要求环上色阶流动，才考虑
conic-gradient+background-position动画 -
clip-path的circle()动画在 Firefox 中偶发闪烁，不建议用于生产环境的加载态
响应式缩放时最易忽略的 transform-origin 问题
当父容器用 scale(0.8) 缩放整个 UI（比如适配小屏），你的 Spinner 也会被同比例缩小，但此时它的 border-width 像素值不变，导致环看起来过粗或过细。更隐蔽的问题是：如果 Spinner 同时在做旋转动画，transform-origin 默认是 50% 50%，但父级缩放后，这个“50%”的计算基准变了，可能造成旋转轴轻微漂移，肉眼可见抖动。
- 解决缩放失真：改用
em或rem设border-width（如border: 0.2em solid transparent;），让它随字体缩放联动 - 防旋转漂移：显式写死
transform-origin: center;，而不是依赖默认值 - 不要用
zoom属性做整体缩放——它已被废弃，且会破坏transform的坐标系
复杂点在于：这些细节在开发机上看不出问题，只有放到真机横屏切换、或低 DPI 屏幕下才会暴露。一旦出现，调试成本远高于初始多写两行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
