最轻量、兼容性最好、性能最稳的loading旋转实现方式是用border-top-color配合transform: rotate()，因border-color不可动画，必须用单边颜色属性；需设border-radius:50%、宽高相等、animation:spin 1s linear infinite，并显式定义@keyframes spin{to{transform:rotate(360deg);}}。
直接用 border-top-color 配合 transform: rotate() 是目前最轻量、兼容性最好、性能最稳的 Loading 旋转实现方式。它不依赖 JS，不触发重排，GPU 可加速，所有现代浏览器（包括 IE10+）都支持。
为什么必须用 border-top-color 而不是 border-color
border-color 本身不可动画——浏览器不支持对这个简写属性做插值过渡，写上去动画根本不会动，只会瞬间跳变。真正能被平滑过渡的是单边颜色属性，比如 border-top-color、border-right-color 等。
常见错误是这样写：
.loader {
border: 4px solid #3498db;
animation: spin 1s infinite;
}
结果转起来是整圈匀速“滚动”，没有方向感，也不像加载中。
正确做法是：
- 四边都设为
transparent，再单独指定一边有颜色，比如border-top-color: #3498db - 必须加
border-radius: 50%，否则不是圆环，是方框加边角 - 宽高必须相等，否则圆环压扁或偏心
animation 值里哪些参数不能省
animation: spin 1s linear infinite 这串里，linear 和 infinite 都不能漏。
漏掉 linear，浏览器默认用 ease 缓动，首尾会顿挫，看起来像卡帧；漏掉 infinite，动画只转一圈就停，完全达不到 Loading 效果。
另外注意：
- @keyframes 定义里，推荐只写
to { transform: rotate(360deg); }，比写from/to两段更稳妥，避免某些旧版 Safari 解析异常 - 别用
rotateZ()，iOS Safari 对 Z 轴支持不稳定，统一用rotate() - 移动端建议加
transform: translateZ(0)触发硬件加速，尤其在长列表里频繁出现时
容易被忽略的布局细节
看似简单的一行 CSS，实际运行中常因几个布局细节崩掉效果：
-
box-sizing默认是content-box，但边框宽度会撑大元素，导致width/height和视觉圆环尺寸对不上；建议显式写box-sizing: border-box -
transform-origin默认是center center，一般够用，但如果父容器有overflow: hidden或缩放，可能切掉动画边缘，可补一句transform-origin: center显式锁定 - 如果 Loader 在 Flex 或 Grid 容器里居中失败，不是动画问题，而是没设
align-items: center; justify-content: center—— 动画本身不负责定位
最简可用版本就三行核心样式：border: 4px solid transparent、border-top-color: #007bff、animation: spin 1s linear infinite。其余都是防坑补丁，不是炫技必需项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
