HTML Loading动画实现方法

纯CSS就能做出足够轻量、兼容性又好的loading动画，甚至不需要JavaScript来参与显隐控制——不过，真要跟页面加载流程挂钩，display或visibility的切换还是得交给JS来触发。这其中的门道，其实比想象中要多一点。

用 @keyframes + border 做旋转 spinner 最省事

这是最常见也最稳妥的方案，几乎能覆盖所有“等待中”场景。思路其实很简单：利用 border 四个方向的颜色差异，配合 transform: rotate() 制造旋转的视觉效果。

• border 必须设置不同颜色或透明/实色组合，比如 border-top: 4px solid #007bff，其余三边用 transparent
• 一定要加 border-radius: 50%，否则转起来不是圆环，而是方块在打转
• 动画时长建议控制在 0.8s–1.2s 之间——太慢显得拖沓，太快又容易让人眼晕
• 旧版 Safari 需要 -webkit-animation 前缀，不过现代浏览器直接用 animation 就行

.spinner {
  width: 32px;
  height: 32px;
  border: 4px solid rgba(0, 123, 255, 0.2);
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

用 transform: scale() + opacity 做脉冲点要注意 timing 协调

三个点依次放大缩小的呼吸效果，经常用在API请求等待上。这方案本身不难，难的是让延迟节奏看起来自然。

• 三个点的 animation-delay 差值最好固定为 0.2s，总周期设为 1.2s，这样循环起来没有突兀感
• 千万别用 width / height 动画做缩放——那会触发重排，性能直接打折；必须用 transform: scale()
• opacity 和 transform 可以同时动画，而且都属于 GPU 加速属性，性能压力不大
• 父容器记得加 text-align: center 或 display: flex; justify-content: center，不然三点很容易对不齐

display: none 切换 loading 元素时常见白屏或闪动

不少人习惯把 loading 元素写在 底部，然后靠 JS 控制 display，结果首屏渲染后才显示 loading，或者隐藏时页面突然跳动一下——这种体验其实很糟糕。

• loading 元素应该放在 开头，并且默认 display: block，然后在 DOM 加载完成时立刻通过 JS 设为 display: none
• 更稳妥的做法是用 visibility: hidden + opacity: 0 + transition，这样能避免重排导致的布局抖动
• 如果 loading 要覆盖整个视口，务必加上 position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，否则用户滚动时就看不见了
• 注意不要在 window.onload 里才隐藏 loading——它会等所有图片、脚本都加载完才触发，用户早看到页面内容了；改用 DOMContentLoaded 事件会更及时

SVG stroke-dasharray 动画适合有进度感知的场景

纯 CSS spinner 是好看，但没法反映真实加载进度。这时候 SVG 路径动画就派上用场了——前提是你得知道路径总长度和当前完成比例。

• 先用 getTotalLength() 获取 的实际长度，然后把它设为 stroke-dasharray 和初始的 stroke-dashoffset
• 动画本质上就是让 stroke-dashoffset 从全长减小到 0——数值越小，画的线条越多
• 如果需要动态更新（比如文件上传进度），直接修改元素的 style.strokeDashoffset 就行，完全不需要重绘
• 注意：IE 不支持 stroke-dasharray 动画，如果还要兼容它，得 fallback 到纯 CSS 方案

真正容易被忽略的是 loading 动画的“存在感”与“消失时机”——它不该比内容还抢眼，也不该在内容就绪后还多停留半秒。控制显隐的那段 JS 逻辑，往往比动画本身更能决定用户的最终体验。