HTML怎么做loading加载动画_html加载动画效果实现方法【精选】-html教程-PHP中文网

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

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

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

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

loading 元素应放在开头，并默认 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 事件