如何在SB Admin页面中添加Spinner动画并在加载完成后停止

1. 插入Spinner的HTML结构 #

把这段代码放在<body>标签的最开头，确保页面加载时第一个渲染Spinner：

<!-- 全局加载Spinner -->
<div id="pageSpinner" class="spinner-fullscreen">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">加载中...</span>
  </div>
</div>

2. 添加Spinner样式 #

把CSS放在页面的<style>标签或外部样式文件中，确保Spinner全屏覆盖且层级最高：

.spinner-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999; /* 高于SB Admin的所有组件层级 */
}

3. 绑定页面加载完成事件隐藏Spinner #

根据需求选择以下其中一种事件监听方式：

方式一：DOM结构加载完成即隐藏（适合不需要等图片/资源加载的场景）

document.addEventListener('DOMContentLoaded', () => {
  const spinner = document.getElementById('pageSpinner');
  if (spinner) spinner.style.display = 'none';
});

方式二：所有资源（图片、样式、脚本）加载完成再隐藏（适合依赖资源的仪表盘）

window.addEventListener('load', () => {
  const spinner = document.getElementById('pageSpinner');
  if (spinner) spinner.style.display = 'none';
});

方式三：适配SB Admin动态加载内容（比如AJAX数据）

如果你的仪表盘有异步加载的内容（比如统计数据、图表），可以在异步请求完成后隐藏Spinner：

// 示例：加载仪表盘数据后隐藏Spinner
async function loadDashboardContent() {
  try {
    // 模拟SB Admin的AJAX请求
    const response = await fetch('/api/dashboard-stats');
    const stats = await response.json();
    
    // 渲染数据到页面（比如填充图表、统计卡片）
    renderStatsCards(stats);
    initCharts(stats);
    
    // 数据渲染完成后隐藏Spinner
    document.getElementById('pageSpinner').style.display = 'none';
  } catch (err) {
    console.error('加载失败:', err);
    // 加载失败也隐藏Spinner，避免卡住
    document.getElementById('pageSpinner').style.display = 'none';
  }
}

// DOM加载完成后启动数据加载
document.addEventListener('DOMContentLoaded', loadDashboardContent);

常见问题排查 #

• Spinner不显示：检查HTML是否放在<body>最顶部，CSS是否正确加载，z-index是否足够高（避免被SB Admin的导航栏覆盖）。
• Spinner无法停止：确保事件监听代码没有被覆盖或重复执行，检查是否有其他脚本修改了Spinner的display属性；如果用了异步加载，要确保请求完成后执行隐藏逻辑。
• Spinner偶尔不工作：避免把JS代码放在<head>中（此时DOM还未渲染，获取不到Spinner元素），必须放在Spinner元素之后或用DOMContentLoaded事件包裹。

内容的提问来源于stack exchange，提问作者Ohidul Islam