border-top旋转圆圈本质是伪进度动画，仅靠单边框旋转实现视觉效果，无法动态反映真实加载进度；需width=height、border-radius:50%、transform-origin:center等参数确保正圆旋转。
用 border-top 做旋转圆圈的本质是“伪进度”
这不是真正反映加载进度的组件，只是视觉上的旋转动画。它靠的是一个 div 的上边框设为实色、其余三边透明（或同背景色），再配合 animation: rotate 实现“转圈”效果。浏览器渲染时，这个“单边框”会随着旋转看起来像在滚动——但它的颜色、粗细、转速全静态，没法动态更新进度值。
border-top 旋转动画的关键参数组合
核心是让元素保持正圆、只露一条边、且旋转轴心居中。常见翻车点在于忘了重置默认样式或 transform-origin 错位：
-
width和height必须相等，否则转出来是椭圆 -
border四边都要设，但只让border-top有颜色，其余设为transparent或0 -
border-radius: 50%不可少，否则是方角矩形转圈 -
animation: spin 1s linear infinite中，spin必须定义为@keyframes spin { to { transform: rotate(360deg); } } -
transform-origin: center要显式写，尤其在父容器有 padding 或定位偏移时，否则旋转中心偏移
IE 和老版 Safari 下 border-top 旋转不圆？检查这三点
不是所有浏览器都把 border-radius: 50% 和单边框一起渲染得完美。尤其 IE11 和 Safari ≤ 12 容易出现锯齿、断点或“卡顿感”：
- 避免用
px值做border-width，改用em或rem提升缩放一致性 - 加
-webkit-transform: rotate(0deg)触发硬件加速（Safari 必需） - 如果仍不圆，换方案：用
svg+stroke-dasharray，它原生支持路径描边和动画，兼容性更稳
想“假装”有进度？别硬改 border-top 颜色
有人试图通过 JS 动态改 border-top-color 来模拟进度变化，这行不通——颜色切换无法对应角度或弧长。真要带进度，必须换思路：
立即学习“前端免费学习笔记（深入）”；
- 用
conic-gradient配合background动画（现代浏览器） - 用
svg <circle></circle>的stroke-dasharray+stroke-dashoffset控制可见弧长 - 若必须 CSS-only 且兼容旧浏览器，就放弃“渐进式填充”，只做“旋转+文字提示”组合，比如在圈中间加
%数字并由 JS 更新
animation-timing-function 设成 linear 反而更卡，换成 cubic-bezier(0.42,0,0.58,1) 有时更顺。 
