html怎么制作一个加载动画？-html教程-PHP中文网

最简纯CSS加载动画需用border+transparent模拟旋转圆环，设animation: spin 1s linear infinite，注意border-radius生效条件、移动端-webkit前缀及opacity+pointer-events控制显隐。

html怎么制作一个加载动画？

用 CSS 实现最简加载动画（无 JS）

纯 CSS 加载动画最轻量、兼容性好，适合多数场景。核心是 @keyframes 配合 animation 属性，不需要任何 JS 或外部资源。

常见错误是直接套用网上“旋转圆圈”代码却忽略浏览器默认行为：比如未设置 border 时 border-radius: 50% 不生效，或忘记加 display: inline-block 导致动画不触发。

推荐用 border + transparent 模拟旋转圆环，比 box-shadow 更稳定
动画时长建议设为 0.8s～1.2s，太短显得突兀，太长让用户焦虑
必须显式声明 animation-iteration-count: infinite，否则只播一次就停
移动端需加 -webkit-animation 前缀（iOS Safari 15.4 以下仍需要）

.loader {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

让加载动画在数据请求时自动显示/隐藏

动画本身容易写，难的是和业务逻辑联动。很多人把 display: none 写死在 HTML 里，结果 JS 控制显示时重排失败，或者忘记恢复状态导致后续请求没动画。

关键不是“怎么显示”，而是“什么时候该显示”。真实项目中，fetch 或 axios 的 pending 状态才是触发点。

不要用 visibility: hidden 控制开关——它仍占布局空间，可能撑开容器
用 opacity: 0 + pointer-events: none 组合更稳妥，过渡也自然
务必在 finally 块里关闭动画，否则网络失败时 loader 会一直转
避免给 loader 元素加过多 class 切换，直接操作 style.opacity 性能更好

const loader = document.querySelector('.loader');
fetch('/api/data')
  .then(res => res.json())
  .finally(() => {
    loader.style.opacity = '0';
    loader.style.pointerEvents = 'none';
  });

SVG 加载动画比 CSS 更可控？

当需要精确控制路径描边、虚线偏移或复杂形变时，SVG 是更优解。但别为了“高级感”强行上 SVG——它体积大、调试难，且 IE11 对 stroke-dasharray 动画支持有 bug。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

典型误用是直接复制 Dribbble 上的炫酷 SVG loader，却不检查 viewBox 和实际容器尺寸是否匹配，导致缩放失真或裁剪。