纯css无法监听外部样式表加载完成，必须用js监听link.onload事件触发类名切换，再通过伪元素实现loading动画效果。
如何用伪元素给CSS加载加Loading效果
直接说结论：纯CSS做不到监听外部样式表是否加载完成，所谓“CSS加载状态过渡”，本质是用JS触发、CSS实现视觉反馈，伪元素只是其中一种低成本的视觉方案。
为什么不能只靠::before或::after自动响应CSS加载
伪元素本身不感知资源加载，它只响应DOM结构和CSS规则是否生效。如果目标CSS文件还没下载完，相关类名没被应用，或者关键样式被阻塞，::before就根本不会渲染——更谈不上“过渡”。常见错误现象是：页面闪一下空白，或Loading图标一直不消失。
- 浏览器对
@import、link[rel="stylesheet"]没有提供CSSOM加载完成事件 -
document.styleSheets里对应sheet的cssRules可能为空或抛错，尤其跨域或未就绪时 - 用
onload监听<link>标签最可靠，但仅支持同源，且IE10+才稳定
实际可行的最小闭环：JS监听 + 类名切换 + 伪元素动画
核心思路是把“加载中”状态交由JS控制，CSS只负责表现。用伪元素画Loading比额外写<span></span>更轻量，也避免干扰语义结构。
- 给
或容器加一个初始类，比如loading-css - 在CSS里用
.loading-css::before定义遮罩层和旋转动画 - JS监听
<link>的onload，成功后移除该类；失败时可加.loading-css.failed做降级提示 - 注意：伪元素必须设
content: ""，否则不渲染；position: fixed需配合z-index确保压住内容
body.loading-css::before {
content: "";
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.8);
z-index: 9999;
animation: spin 1s infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
容易被忽略的兼容性和边界情况
这个方案看着简单，但几个细节不处理好，Loading就会卡死或乱跳：
立即学习“前端免费学习笔记（深入）”；
- 多个CSS文件时，不能只监听第一个
<link>，得用Promise.all聚合所有onload事件 - 动态插入的
<link>（比如主题切换），要手动绑定onload，不能依赖HTML解析顺序 - Safari对
link.onload支持不稳定，建议加setTimeout兜底，比如10秒后强制移除loading类 - 伪元素动画若用
transform，在低版本Android WebView里可能闪烁，可改用animation-timing-function: steps(12)模拟帧率控制
真正难的不是画那个转圈，而是判断“什么时候才算加载完了”——这永远需要JS定，CSS只管怎么画。
