HTML怎么做loading加载动画_html加载动画效果实现方法精选

时间：2026-06-27 10:00:52 编辑：袖梨来源：一聚教程网

纯CSS可实现可靠轻量的loading动画，但显隐控制需JS触发；推荐@keyframes+border旋转方案，需设不同色边框、border-radius:50%及0.8s–1.2s动画时长。

直接用 CSS 就能做出可靠、轻量、兼容性好的 loading 动画，不需要 JS 也能控制显隐——但真要和页面加载流程联动，display 或 visibility 的切换必须由 JavaScript 触发。

用 `@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 元素写在 <body> 底部，靠 JS 控制 display，结果首屏渲染后才显示 loading，或隐藏时页面跳动。

立即学习“前端免费学习笔记（深入）”；

loading 元素应放在 <body> 开头，并默认 display: block，JS 在 DOM 加载完立刻 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() 获取 <path> 实际长度，设为 stroke-dasharray 和初始 stroke-dashoffset
动画本质是让 stroke-dashoffset 从全长减到 0，数值越小，画得越多
若需动态更新（如文件上传进度），直接修改元素的 style.strokeDashoffset 即可，无需重绘
注意：IE 不支持 stroke-dasharray 动画，如需兼容，得 fallback 到 CSS 方案

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

推荐专题

最新下载

热门教程

HTML怎么做loading加载动画_html加载动画效果实现方法精选

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

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

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

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程

推荐专题

最新下载

热门教程

HTML怎么做loading加载动画_html加载动画效果实现方法精选

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

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

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

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程

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

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

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

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