纯 css 加载旋转图标可用 border + border-radius: 50% 实现，需设三边透明、一边有色，配合 @keyframes spin 均匀旋转，兼容 ie10+ 且 dom 最简。
用纯 CSS 实现一个不依赖 JS 的加载中旋转图标
直接用 border + border-radius: 50% 做圆环，再靠 animation: spin 转起来就行，不需要任何外部资源或框架。
常见错误是只设了 border 但没清空 content 或 width/height，导致显示成实心块；或者忘了加 @keyframes spin，动画根本不跑。
- 必须设置
border且三边透明、一边有色（比如border: 4px solid transparent+border-top-color: #007bff） -
width和height要一致，推荐20px到40px之间，太小看不清，太大失比例 - 一定要加
border-radius: 50%，否则是方角转圈 -
animation: spin 1s linear infinite中的1s可调快慢，linear避免卡顿感
为什么用 border 而不是 clip-path 或 SVG
因为 border 方案兼容性最好：IE10+、所有现代浏览器都支持，且 DOM 节点最少（一个 <div> 就够），渲染开销低。
<p><code>clip-path 在 Safari 旧版本里会失效；内联 SVG 虽然可控性强，但多出至少 10 行标记，还容易因 viewBox 或缩放错位。
- 如果项目要支持 IE9，就得换方案（比如 GIF 图片），但 IE9 已基本淘汰
- 移动端上，
border动画比 SVG<circle></circle>+stroke-dasharray更稳，尤其在低端安卓机上 - 不要用
transform: rotate()直接转整个元素——它会带动子内容一起转，而加载图标通常要嵌在按钮里，不能影响文字
@keyframes spin 的写法细节
必须写完整，不能省略 from 和 to，某些旧版 Chrome 会忽略简写形式。
@@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
注意：@@ 是为避免被 Markdown 解析器误吞，实际代码里是单个 @；rotate(360deg) 不能写成 rotate(1turn)，Safari 12 及更早不认 turn 单位。
- 别用
animation-timing-function: ease-in-out，会让旋转“一顿一顿”，加载状态需要均匀节奏 - 如果动画启动有延迟，检查是否误加了
animation-delay，或者父容器用了visibility: hidden导致初始不可见 - 想暂停动画？用
animation-play-state: paused，而不是删掉 class —— 否则重绘会闪一下
嵌入页面时怎么避免布局跳动
加载图标常放在按钮里或文字旁，如果没设好尺寸基准，插入瞬间会把周围元素挤开。
核心是让容器预留空间：给父元素设 min-width 和 min-height，或直接用 aspect-ratio: 1（Chrome 88+ 支持），但兼容性不够时就老实用 padding-bottom: 100% 配合 position: absolute。
- 最稳妥做法：图标容器设
display: inline-block+ 固定width/height，父元素用vertical-align: middle对齐文字 - 别用
margin微调位置，改用transform: translateY(-2px)，不影响文档流 - 深色背景上记得检查颜色对比度，
#007bff在#333上可能不够显眼，可换#28a745或加filter: brightness(1.2)
真正麻烦的不是写出来，而是让这个小圆圈在各种字号、行高、flex 容器、table 单元格里都不偏不晃——多试两轮真实环境，比背一百行代码管用。
