Bootstrap 5 加载效果

Spinners 旋转动画

使用Spinners向用户表明正在加载或处理中。Bootstrap提供边框旋转和生长旋转两种样式。

边框旋转动画 (Border spinner)

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<!-- 更多颜色变体... -->

生长旋转动画 (Growing spinner)

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<!-- 更多颜色变体... -->

尺寸调整

<!-- 小尺寸 -->
<div class="spinner-border spinner-border-sm" role="status"></div>
<div class="spinner-grow spinner-grow-sm" role="status"></div>

<!-- 默认尺寸 -->
<div class="spinner-border" role="status"></div>
<div class="spinner-grow" role="status"></div>

<!-- 自定义大尺寸 -->
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status"></div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"></div>

进度条

使用进度条向用户显示任务或过程的完成百分比。

基础进度条

25%

40%

50%

75%

100%

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>

<!-- 更多颜色变体... -->

条纹和动画进度条

<!-- 条纹进度条 -->
<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"></div>
</div>

<!-- 动画条纹进度条 -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%"></div>
</div>

多色进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%"></div>
</div>

交互式进度条演示

0%

进度: 0%

// JavaScript 代码示例
let progress = 0;
const progressBar = document.getElementById('interactiveProgress');
const progressValue = document.getElementById('progressValue');

function updateProgress() {
    if (progress < 100) {
        progress += 5;
        progressBar.style.width = progress + '%';
        progressBar.setAttribute('aria-valuenow', progress);
        progressBar.textContent = progress + '%';
        progressValue.textContent = progress;
        setTimeout(updateProgress, 200);
    }
}

document.getElementById('progressStart').addEventListener('click', function() {
    progress = 0;
    updateProgress();
});

document.getElementById('progressReset').addEventListener('click', function() {
    progress = 0;
    progressBar.style.width = '0%';
    progressBar.setAttribute('aria-valuenow', 0);
    progressBar.textContent = '0%';
    progressValue.textContent = '0';
});

按钮加载状态

在按钮中集成加载状态，为用户提供操作反馈。

按钮中的Spinner

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  加载中...
</button>

<button class="btn btn-success" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  加载中...
</button>

交互式按钮加载

点击上面的按钮查看加载效果，3秒后恢复。

// JavaScript 代码示例
document.getElementById('loadingButton').addEventListener('click', function() {
    const button = this;
    const spinner = button.querySelector('.spinner-border');
    const buttonText = button.querySelector('.btn-text');

    // 显示spinner，禁用按钮
    spinner.style.display = 'inline-block';
    buttonText.textContent = '加载中...';
    button.classList.add('loading');
    button.disabled = true;

    // 模拟异步操作
    setTimeout(function() {
        // 恢复按钮状态
        spinner.style.display = 'none';
        buttonText.textContent = '点击模拟加载';
        button.classList.remove('loading');
        button.disabled = false;
    }, 3000);
});

占位符/骨架屏

使用占位符组件在内容加载前显示页面结构，提升用户体验。

基础占位符

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

占位符动画

<span class="placeholder col-6 placeholder-wave"></span>
<span class="placeholder w-75 placeholder-wave"></span>
<span class="placeholder placeholder-wave" style="width: 25%;"></span>

卡片占位符示例

<div class="card">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-3"></a>
  </div>
</div>

全屏加载遮罩

创建全屏加载遮罩，用于页面或重要操作加载时显示。

全屏加载示例

点击按钮查看全屏加载效果，3秒后自动关闭。

<!-- HTML 结构 -->
<div class="loading-overlay" id="loadingOverlay">
  <div class="text-center">
    <div class="spinner-border text-light" style="width: 3rem; height: 3rem;" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="mt-3 text-white">加载中，请稍候...</div>
  </div>
</div>

<!-- JavaScript 代码 -->
document.getElementById('showOverlay').addEventListener('click', function() {
  const overlay = document.getElementById('loadingOverlay');
  overlay.classList.add('show');

  setTimeout(function() {
    overlay.classList.remove('show');
  }, 3000);
});

Bootstrap5教程

Bootstrap5 加载效果