border-top-color 单独旋转能做出 loading 圆圈，本质是利用宽高为0时四边等宽border渲染成菱形、仅top色块显弧形的原理，配合@keyframes旋转动画实现；必须同时设width:0;height:0;border:4px solid transparent;border-top-color:#007bff。
为什么 border-top-color 单独旋转能做出 Loading 圆圈
本质是利用了 CSS 的 border 绘制原理：当一个元素宽高为 0，但设置了四边等宽的 border，它会渲染成一个“X 形”的菱形；若只保留一边有颜色（比如 border-top-color），其余三边设为 transparent，就只剩下一个弧形色块——这就是圆圈的“1/4”视觉基础。再配合 animation: rotate(360deg)，看起来就像在转圈。
关键点在于必须同时满足：width: 0; height: 0;、border: 4px solid transparent;、border-top-color: #007bff;，缺一不可。否则要么是实心方块，要么根本看不到弧。
用 @keyframes 实现顺滑旋转动画
直接写 transform: rotate(360deg) 不会动，必须靠 @keyframes 定义帧，再绑定到元素上。常见错误是漏掉 animation-timing-function: linear，导致旋转卡顿或加速减速（默认是 ease）。
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }- 绑定时加
animation: spin 1s linear infinite;，其中infinite表示循环，1s控制快慢 - 别忘了加浏览器前缀（如旧版 Safari）：
-webkit-animation: spin 1s linear infinite;
响应式与尺寸控制：改 border-width 比改宽高更可靠
很多人想调大 Loading 圈，第一反应是改 width/height，但这是错的——只要宽高不是 0，border 就不会聚合成圆弧，而会拉伸成“带尖角的饼图”。真正可控的尺寸参数只有 border-width。
- 圆圈直径 ≈
2 × border-width（严格说是√2 × border-width，但视觉上足够近似） - 要适配高清屏，可配合
transform: scale(1.5)局部放大，避免模糊 - 如果父容器有
overflow: hidden，记得给 Loading 元素设margin: -2px（约等于负的border-width），防止边缘被裁
兼容性注意：IE 和老 Android WebView 的坑
IE10+ 支持 @keyframes，但 IE9 及以下完全不支持；老 Android 4.3 及以下 WebView 对 transform 动画支持极差，会出现闪烁或不动。实际项目中若需兼容，得 fallback 到 GIF。
- 检测是否支持 CSS 动画：
if (CSS.supports('animation', 'spin 1s')) { /* 用 CSS 方案 */ } - 不要依赖
will-change: transform强制 GPU 加速——在某些低端安卓机上反而更卡 - 如果用了
display: inline-block布局，注意默认有基线对齐空白，加vertical-align: middle消除
最易被忽略的是动画重绘时机：如果 Loading 元素被 JS 频繁插入/移除 DOM，而没用 animation-play-state: paused 控制启停，可能造成内存泄漏或卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
