用 border 颜色做旋转圈最简单，因其无需额外元素或 svg，仅靠 width:0;height:0; 和透明 border 交界处的自然弧形即可形成环状动画，配合 animation:spin 实现顺时针旋转。
为什么用 border 颜色做旋转圈最简单？
因为不用额外元素、不依赖 SVG 或伪类，纯 CSS 就能画出视觉上“实心”的旋转圆环——本质是利用 border 的斜角交界处自然形成的弧形。浏览器渲染时，四个方向的 border 在角上会自动切出圆角过渡，只要把宽高设为 0，只留 border，就能露出这个环形。
- 必须设
width: 0; height: 0;，否则看到的是矩形框+边框，不是环 -
border-width决定环的粗细，比如border-width: 4px; - 四个方向的
border-color必须有至少一个透明（transparent），其余非透明才形成“缺口旋转”效果；全都不透明就只是个实心方块 - 别用
border-radius：它对 0 宽高的元素无效，起不到作用
border 旋转圈的标准写法和常见错因
最稳的写法是固定三边透明、一边有色，并配合 animation: spin。很多人卡在转不动或转成方块，基本都是下面这几个点没对：
- 漏了
@keyframes spin定义，或没加transform: rotate(360deg)到to块里 - 忘了加浏览器前缀：
animation和transform在旧版 Safari/Android Webview 里需要-webkit- - 用了
border-style: solid以外的值（比如dashed），会导致边缘断裂，看不出连续环 - 父容器没设
display: inline-block或flex对齐，导致旋转时位置飘移
最小可用示例：
div.loader {
width: 0;
height: 0;
border: 4px solid transparent;
border-top-color: #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
不同颜色组合对应的实际效果差异
border-color 四值顺序（上右下左）直接决定哪一段“亮起”，进而影响旋转方向感和加载节奏感：
-
border-color: #007bff transparent transparent transparent;→ 只有顶部色块，顺时针转，最常用 -
border-color: transparent #007bff transparent transparent;→ 只有右侧色块，看起来像逆时针启动（其实是视角差） -
border-color: #007bff #ff6b6b transparent transparent;→ 两个色块拼接，转起来像双色进度，但容易显得卡顿（因两段交接处有轻微停顿感） - 想变“实心圆点”？不行。border 方案天生是环状，要实心得换
box-shadow或radial-gradient
移动端兼容性和性能要注意什么？
老 Android（4.3 及以下）、iOS 9 之前，transform: rotate() 动画容易掉帧甚至卡死，不是写法问题，是渲染管线限制：
- 务必加
will-change: transform;，提示浏览器提前升层 - 避免同时动画多个 loader：每个都触发重绘，低端机可能直接卡住
- 别在
:hover里触发旋转动画——移动设备没 hover，且 iOS Safari 对 hover 触发的动画支持极差 - 如果项目必须支持 IE10/11，
border圈能显示，但animation需补-ms-前缀，且不能用transform，得退化成filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);（不推荐，太糙）
真正麻烦的不是怎么写出来，而是默认用 border-top-color 时，设计师给的动效稿可能是从右开始亮、或者带呼吸缩放——这时候得调四色顺序+加 animation-delay，而不是硬改 transform-origin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
