浏览器地址栏转圈无法用CSS覆盖，只能控制页面内loading动画；应将loading元素置于body开头、用transform/opacity动画、配合DOMContentLoaded显示和资源就绪隐藏，并优先选用inline SVG而非GIF。
怎么用 CSS 覆盖浏览器默认的 loading 指示器
浏览器地址栏或标签页上的转圈（比如 chrome 的旋转圆点）是系统级 ui，document 里任何代码都改不了它。你只能控制自己页面内的 loading 状态展示——也就是用户看到「页面正在加载」时，你亲手画的那个转圈。
常见错误现象：body 上加了 opacity: 0.5 或遮罩层，但首屏白屏时间长，用户根本看不到你的 loading 动画；或者用了 display: none 隐藏 loading 元素，却忘了在 DOM ready 后再 show 出来。
- 必须把 loading 元素写在
<body>开头位置，越早渲染越好 - 避免依赖 JavaScript 初始化：用纯 CSS + 少量内联 JS 控制显隐，防止 JS 加载失败导致 loading 卡死
- 不要用
visibility: hidden做初始隐藏——它仍占布局空间，可能影响首屏渲染流
用 @keyframes 写一个轻量且兼容的旋转动画
不是所有「转圈」都适合做 loading 动画。CSS 动画性能取决于是否触发重排（layout）、重绘（paint）和合成（composite）。transform + opacity 是最安全的选择。
常见错误现象：用 left/top 移动元素模拟旋转，或给 border-radius 加动画，导致卡顿、掉帧，尤其在低端 Android 设备上明显。
- 推荐写法：
@keyframes spin { to { transform: rotate(360deg); } } - 动画元素建议用
<div class="spinner"></div>，宽高设为固定值（如24px），背景用border或clip-path构建环形 - 别用
animation-timing-function: cubic-bezier(.2, .68, .18, 1.08)这类夸张缓动——loading 不需要拟物感，匀速更可信
.spinner {
width: 24px;
height: 24px;
border: 2px solid #eee;
border-top-color: #333;
animation: spin 1s linear infinite;
}
怎么让 loading 动画只在资源加载中显示，又不干扰首屏渲染
关键不在「怎么动」，而在「什么时候出现 / 消失」。很多人用 window.onload 隐藏 loading，结果图片、字体、第三方脚本没加载完就关了，用户看到错位或空白。
使用场景：SPA 页面、含大量图片/字体/外部 SDK 的静态页、需要等待 API 返回才渲染主体内容的情况。
- 显示时机：DOM 解析完成即显示（
DOMContentLoaded事件前就插入 loading 元素） - 隐藏时机：等真正依赖的数据/资源就绪后再移除，比如
fetch()成功后、IntersectionObserver确认首屏图片加载完毕、或document.fonts.load()返回 resolve - 别用
setTimeout模拟延迟隐藏——网络波动下不可靠，容易误判
为什么 inline SVG 比 GIF 更适合做 loading 图标
GIF 文件体积小，但无法缩放不失真、不能响应主题色变化、动画节奏不可控。而 inline SVG 可以直接用 CSS 控制颜色、大小、速度，且零请求、无跨域问题。
性能影响：GIF 解码会占用主线程，尤其多图并存时；SVG 动画走合成线程，更稳定。
- 把 SVG 写进 HTML，用
<svg><circle>或<path>描边+旋转实现 - 用
stroke-dasharray+stroke-dashoffset做「描边动画」比纯旋转更有设计感，也更容易控制停顿节奏 - 注意 Safari 对
will-change: transform的处理异常，inline SVG 中慎加该声明
复杂点在于：loading 动画不是独立模块，它嵌在真实加载流程里。你得清楚知道「我在等什么」，而不是只关心「怎么转得好看」。漏掉一个字体加载、一个异步组件、甚至一个 import() 的 chunk，都会让 loading 提前消失或永远不消失。
