文件上传旋转动画须预渲染并用visibility/opacity控制显隐，禁用animation-play-state以防角度突变；推荐border-top-color纯CSS方案，轻量且响应快。
文件上传时如何正确挂载旋转动画元素
动画不能等 input[type="file"] 触发后才插入 DOM，否则用户点击“选择文件”到实际开始上传之间有空白期。必须在用户可操作前就渲染好动画容器，并默认隐藏；上传开始时仅切换显隐状态，避免重排或节点插入延迟。
常见错误是把 .loader 放在表单外、或用 display: none 切换——这会导致每次显示都触发重排，动画首帧卡顿。稳妥做法是：
- 用
visibility: hidden; opacity: 0;预置 loader，上传开始时加类改为visibility: visible; opacity: 1;，并配transition: opacity 0.15s ease - loader 必须脱离文档流：
position: absolute或transform: translateZ(0)触发 GPU 加速 - 确保父容器有
position: relative（若用绝对定位），否则 loader 可能飘出按钮区域
如何绑定动画启停而不出现“咔哒”回弹
别用 animation-play-state: paused/running 控制旋转启停。CSS 动画暂停后恢复会从 @keyframes 起点重算，导致视觉上角度突变——尤其在上传中途取消、或网络抖动重试时非常明显。
真正可靠的做法是：动画始终运行，只控制可见性。例如：
立即学习“前端免费学习笔记（深入）”；
.loader { animation: spin 0.8s linear infinite; }
.loader.is-hidden { visibility: hidden; opacity: 0; }
JS 中只需：
uploadBtn.addEventListener('click', () => {
loader.classList.remove('is-hidden');
// 后续在 fetch().then() 或 xhr.onload 中加回 is-hidden
});
为什么 border-top-color 方案比 SVG 更适合上传场景
上传动画通常嵌在按钮内、或紧贴文件输入框右侧，空间有限且需快速响应。用 border + border-top-color 的纯 CSS 方案体积小、无请求、无 JS 依赖，特别适合：
- 表单提交前的瞬时反馈（
- 移动端弱网环境下避免额外资源加载失败
- 与现有按钮样式复用同一套 color 变量（如
--primary-color）
注意两点硬性要求：
- 必须设
width和height相等，且显式声明（不能靠 content 或 padding 撑开） -
border-radius: 50%不可省略，否则 Safari 旧版会渲染成带棱角的椭圆
上传完成时动画消失但图标没对齐？检查 transform-origin
如果 loader 是用 transform: rotate() 实现，而它旁边跟着一个上传成功图标（如 ✅），两者垂直居中错位，大概率是 transform-origin 没统一。默认值是 50% 50%，但若 loader 容器用了 font-size: 0 或 line-height: 0 清除 inline 元素间隙，transform-origin 仍按盒模型中心算，而图标按文本基线对齐。
解决方法很简单：
- 给 loader 显式写
transform-origin: center center（双值更明确） - 让 loader 和图标同级、同父容器，并用
display: flex; align-items: center;统一对齐 - 避免在 loader 上同时用
margin和transform，二者叠加可能导致视觉偏移
最易被忽略的是：动画元素一旦参与 flex/grid 布局，其 transform 会受容器 align-items 影响，但 transform-origin 不会自动适配——必须手动锁定中心点。
