最简纯CSS加载动画需用border+transparent模拟旋转圆环，设animation: spin 1s linear infinite，注意border-radius生效条件、移动端-webkit前缀及opacity+pointer-events控制显隐。
用 CSS 实现最简加载动画（无 JS）
纯 CSS 加载动画最轻量、兼容性好，适合多数场景。核心是 @keyframes 配合 animation 属性，不需要任何 JS 或外部资源。
常见错误是直接套用网上“旋转圆圈”代码却忽略浏览器默认行为：比如未设置 border 时 border-radius: 50% 不生效，或忘记加 display: inline-block 导致动画不触发。
- 推荐用
border+transparent模拟旋转圆环，比box-shadow更稳定 - 动画时长建议设为
0.8s～1.2s，太短显得突兀，太长让用户焦虑 - 必须显式声明
animation-iteration-count: infinite，否则只播一次就停 - 移动端需加
-webkit-animation前缀（iOS Safari 15.4 以下仍需要）
.loader {
width: 20px;
height: 20px;
border: 2px solid #ddd;
border-top-color: #333;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
让加载动画在数据请求时自动显示/隐藏
动画本身容易写，难的是和业务逻辑联动。很多人把 display: none 写死在 HTML 里，结果 JS 控制显示时重排失败，或者忘记恢复状态导致后续请求没动画。
关键不是“怎么显示”，而是“什么时候该显示”。真实项目中，fetch 或 axios 的 pending 状态才是触发点。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 不要用
visibility: hidden控制开关——它仍占布局空间，可能撑开容器 - 用
opacity: 0+pointer-events: none组合更稳妥，过渡也自然 - 务必在
finally块里关闭动画，否则网络失败时 loader 会一直转 - 避免给 loader 元素加过多 class 切换，直接操作
style.opacity性能更好
const loader = document.querySelector('.loader');
fetch('/api/data')
.then(res => res.json())
.finally(() => {
loader.style.opacity = '0';
loader.style.pointerEvents = 'none';
});
SVG 加载动画比 CSS 更可控？
当需要精确控制路径描边、虚线偏移或复杂形变时，SVG 是更优解。但别为了“高级感”强行上 SVG——它体积大、调试难，且 IE11 对 stroke-dasharray 动画支持有 bug。
典型误用是直接复制 Dribbble 上的炫酷 SVG loader，却不检查 viewBox 和实际容器尺寸是否匹配，导致缩放失真或裁剪。
- 优先用
<circle>或<path>，避免嵌套<g>增加渲染负担 -
stroke-dasharray和stroke-dashoffset要成对设置，否则动画卡顿 - 如果用
transform: rotate()，确保transform-origin在中心点，否则旋转偏移 - 导出 SVG 时取消“响应式”选项，硬编码
width/height，防止 CSS 尺寸干扰
移动端真机上加载动画卡顿怎么办？
开发时看着流畅，一上 iPhone 就掉帧，大概率是触发了强制同步布局（forced synchronous layout）。常见诱因是动画元素父容器用了 flex 或 grid，而 loader 自身又设置了 margin 或 position: relative。
另一个隐蔽问题是 iOS Safari 对 transform: rotate() 的硬件加速不敏感，尤其在低电量模式下会降频。
- 给 loader 加
will-change: transform（仅在动画开始前动态添加，不用写死） - 禁用
user-select: none—— 它在某些 iOS 版本中会导致合成层失效 - 避免在动画期间读取
offsetHeight或getBoundingClientRect() - 真机测试务必打开“开发者 > 仿真 > 低电量模式”，这是卡顿高发场景
动画本身越简单越可靠。一个 20×20px 的纯色圆点旋转，比带阴影、渐变、多层叠加的动效更容易通过各种设备的性能考验。
