最简可靠旋转加载动画需用@keyframes定义唯一名称的动画，含from/to或0%/100%，绑定到有宽高且可见的元素，用transform: rotate()而非left/top，设transform-origin: center、animation: name 1s linear infinite，并用border-radius: 50%和单边有色边框实现圆环。

用 @keyframes 定义旋转动画最可靠

浏览器兼容性好、无需 JS、不依赖第三方库，@keyframes 是纯 CSS 实现旋转加载动画的基石。关键不是“转起来”，而是让旋转看起来平滑、不卡顿、不拉伸。

• 必须加 transform-origin: center，否则元素可能绕左上角转，尤其对 inline 元素或未设宽高的容器
• 动画时长建议设为 0.8s～1.2s，太短像抽搐，太长让用户误以为卡死
• 务必写 animation-timing-function: linear，用 ease 会导致启停顿挫，破坏“持续运转”感
• 示例：

  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  .loader {
    animation: spin 1s linear infinite;
    transform-origin: center;
  }

用 border 画圆环加载器最轻量

不需要 SVG 或额外 DOM 节点，仅靠一个空 <div> + 边框技巧就能做出经典环形旋转效果，适合按钮 loading、API 请求等待等场景。

• 核心是设置三边 border 透明，一边有色：border: 4px solid transparent + border-top-color: #007bff
• 必须设 border-radius: 50%，否则是方角矩形转圈
• 高度宽度要相等，且最好显式声明（如 width: 24px; height: 24px），避免 inline 元素尺寸塌陷
• 注意 Safari 旧版本对 transparent 边框渲染有偏差，可改用 rgba(0,0,0,0) 兜底

避免 animation-play-state 控制时的跳帧问题

很多方案用 animation-play-state: paused/running 动态启停加载动画，但直接切状态会导致旋转角度突变，视觉上“咔”一下回弹。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 根本原因是 CSS 动画没有记忆当前旋转角度，暂停后恢复会从 keyframe 起点重算
• 稳妥做法是用类名切换控制显示/隐藏，而非启停动画本身：.loader 始终运行，.loader.hidden { visibility: hidden }
• 如果真需暂停，可用 JS 记录 getComputedStyle(el).transform 的矩阵值，再用 transform: matrix(...) 手动设初始态 —— 但通常没必要，掩盖比暂停更自然

IE11 下 rotate() 需要 -ms- 前缀但不推荐补

IE11 支持 -ms-transform: rotate(360deg)，但它的 @keyframes 实现有严重 bug：动画会忽快忽慢，且无法与 transform-origin 正确配合。

立即学习“前端免费学习笔记（深入）”；

• 实际项目中，若仍需支持 IE11，建议降级为静态 GIF 加载图，比硬塞 CSS 动画更稳定
• 所有现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）都原生支持无前缀 transform 和 @keyframes
• 别信自动前缀工具（如 Autoprefixer）对 IE11 @keyframes 的“修复”，它只能加前缀，不能修逻辑缺陷

真正难的不是让圈转起来，是让转得不刺眼、停得不突兀、缩放时不变形、换主题时不漏色 —— 这些细节全藏在 transform-origin、box-sizing、颜色继承和父容器 overflow 里。