用::before实现加载动画需三步：父元素设position: relative；content用零宽空格或字体图标Unicode；通过.is-loading类控制显示与@keyframes动画。
怎么用 ::before 实现加载中图标动画
直接上手：用 ::before 插入一个带 animation 的小图标，比 JS 插 DOM 轻量，也比改 class 切换更干净。关键是它得「动态显示/隐藏」，不能一刷新就一直转。
- 必须给元素加
position: relative，否则::before定位会飘走 -
content不能为空字符串（""），否则伪元素不渲染；推荐用"\200B"（零宽空格）或字体图标 Unicode（如"\e900"） - 动画要用
@keyframes单独定义，别写在::before里——CSS 预处理器或构建工具可能抽风，导致 animation 不生效 - 状态切换靠控制父元素的 class，比如加个
is-loading，再用.is-loading::before触发显示和动画
::before 加载图标的常见错觉：明明写了却没出现
最常卡在这几步：
- 父元素没设
position: relative，::before默认按文档流渲染，可能被挤到看不见的位置，甚至被父容器overflow: hidden剪掉 -
content写成content: ""且没配display或尺寸，伪元素存在但宽高为 0，转也白转 - 用了字体图标（如 Font Awesome），但没引入对应字体文件，或
font-family拼错，结果只显示方块或空白 - 动画名拼错、没加浏览器前缀（
-webkit-animation在 Safari 旧版仍必要）、或animation-duration设为0s
用 font-icon 还是 svg 或纯 CSS 画？选哪个更稳
不是越炫越好，而是看维护成本和兼容性：
- 纯 CSS 画（比如用
border旋转做 spinner）：零依赖，但 IE11 及以下对transform-origin和animation-timing-function支持差，容易卡顿 - 字体图标（
content: "\f110"）：需确保字体加载完成，否则闪白；建议配合font-display: block防止 FOIT - 内联 SVG（通过
content: url("data:image/svg+xml,...")）：兼容性好、可缩放、无网络请求，但 base64 编码后体积略大，且部分老安卓 WebView 对 data URL 解析异常 - 实际推荐：用 SVG data URL +
background-image替代content，规避content对字体/编码的依赖，也更容易控制尺寸和颜色
怎么让加载状态真正「动态」：JS 控制显隐的边界条件
光写好 CSS 不够，JS 绑定时机不对，照样白搭：
- 别在请求发起前就加
is-loading类——如果接口秒回，用户会看到一闪而过的 loading，体验反而更差；应在fetch发出后、且响应未返回前才添加 - 务必在
finally里移除 class，而不是只在then或catch里删——否则请求被取消、超时、网络中断时，loading 图标会永远挂着 - 多个并发请求时，别简单地「+1 / -1」计数；用
AbortController配合状态标记，避免某个请求失败后误删整个 loading 状态 - 移动端注意：iOS Safari 对伪元素动画的硬件加速不敏感，建议加
transform: translateZ(0)强制开启 GPU 渲染
CSS 伪元素的加载状态看似简单，但真实项目里最容易栽在「定位失效」「字体未加载」「JS 移除时机错」这三处，调的时候先盯死这三点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
