index.html里如何添加加载中的Loading动画？-html教程-PHP中文网

推荐用内联display:none的固定定位SVG加载动画，配合stroke-dashoffset旋转路径，确保首屏不闪、层级正确、兼容性强且性能优。

index.html里如何添加加载中的loading动画？

用 CSS 实现轻量级 Loading 动画，不依赖 JS

直接在 index.html 里加一个带 class 的 div，配合纯 CSS 动画就能生效，适合首屏加载、表单提交等简单场景。关键不是“动起来”，而是“动得自然且不遮挡内容流”。

常见错误是把 loading 元素写在最外层却忘了隐藏逻辑，导致页面一打开就显示；或者用 position: fixed 但没设 z-index，被其他元素盖住。

推荐写法：

<div id="loading" style="display: none;">
  <div class="spinner"></div>
</div>

CSS 部分（放在或外链样式中）：

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

动画用 transform: rotate() 而非 left/top，性能更好
border-radius: 50% 是圆环基础，缺了就变方块旋转
如果页面有深色背景，把 #f3f3f3 换成更浅的灰，否则看不清

用 JavaScript 控制显示/隐藏时机

单纯 CSS 动画只是“会转”，真正要解决的是“什么时候转、什么时候停”。多数人卡在 JS 触发逻辑上：比如在 fetch 发起后才 show，但没在 finally 里 hide，结果 loading 卡死。

典型用法（放在 <script></script> 块里）：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

function showLoading() {
  document.getElementById('loading').style.display = 'block';
}
function hideLoading() {
  document.getElementById('loading').style.display = 'none';
}

// 示例：点击按钮触发请求
document.querySelector('#submitBtn').addEventListener('click', async () => {
  showLoading();
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    console.log(data);
  } finally {
    hideLoading(); // 确保无论成功失败都收起
  }
});

别用 visibility: hidden 替代 display: none，前者仍占布局空间
如果用 jQuery，$("#loading").show() 本质也是改 display，但要注意它可能受 CSS !important 干扰
移动端慎用 setTimeout 延迟 show —— 用户点下去没反馈，反而觉得卡

避免在 DOM 加载完成前闪现 loading

如果把

 写在  开头，而 CSS 还没加载完，用户可能看到几毫秒的“空白圆圈”或“文字 loading”，体验断层。解决方案有两个方向：

把 loading 元素写在  末尾，并用内联 style="display:none"，确保 HTML 解析时默认隐藏
在  里加极简内联样式：<style>#loading { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; }</style>

不要等 DOMContentLoaded 才初始化 loading 元素——它本身就得是 HTML 固有部分

用 SVG 替代 CSS spinner 提升兼容性和清晰度
老版 Safari 或某些安卓 WebView 对 @keyframes 支持不稳定，CSS 圆环边缘可能锯齿。SVG 方案体积小、缩放无损，且可直接内联。
替换上面的 
：
<svg class="spinner-svg" width="40" height="40" viewbox="0 0 40 40"><path d="M20,3.5 A16.5,16.5 0 0,1 36.5,20" fill="none" stroke="#007bff" stroke-width="3" stroke-linecap="round" opacity="0.3"></path><path d="M20,3.5 A16.5,16.5 0 0,1 36.5,20" fill="none" stroke="#007bff" stroke-width="3" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="20" class="spinner-path"></path></svg>
对应 CSS 动画只需驱动 stroke-dashoffset：
.spinner-path {
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  100% { stroke-dashoffset: 100; }
}

SVG 路径必须用 stroke-dasharray 和 stroke-dashoffset 配合才能“滚动”画线
数值要算准：圆周长 ≈ 2 × π × r = 2 × 3.14 × 16.5 ≈ 103.6，所以 stroke-dasharray="100" 是近似取整，够用
这个方案在 IE11 下也能跑，比 CSS transform 更稳



实际项目里最常漏掉的是：loading 元素没加 z-index，或父容器用了 transform 创建了新的 stacking context，导致 loading 被压在底下——这种问题没法靠重写动画解决，得查层叠上下文。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！