异常教程

Bootstrap4 加载中效果（长文讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，"加载中效果"（Loading Indicator）是提升用户体验的核心元素之一。它不仅是页面状态的可视化反馈，更是用户与系统之间沟通的"语言"。Bootstrap 4 作为最受欢迎的前端框架之一，提供了高度可定制的加载中效果组件，让开发者能够快速实现优雅的交互体验。本文将从基础概念、核心组件、实际案例到性能优化，系统性地讲解如何在 Bootstrap 4 中实现加载中效果，并通过代码示例帮助读者快速上手。

一、什么是加载中效果？

加载中效果是指在页面内容加载过程中，通过视觉元素（如旋转图标、进度条）向用户传递"正在处理请求"的反馈。这种设计如同交通信号灯的功能——告诉用户"请稍等，系统正在处理"。

在 Bootstrap 4 中，加载中效果主要通过 Spinner 组件实现。该组件基于 CSS 动画技术，结合预设样式和灵活的扩展性，能够满足绝大多数场景需求。

二、Bootstrap 4 Spinner 组件详解

1. 核心结构与基本用法

Spinner 组件的核心是 <div class="spinner"> 标签，通过添加不同类名可实现样式和行为的控制。其基础 HTML 结构如下：

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
  • spinner-border：定义边框旋转动画样式
  • role="status"：为无障碍访问提供语义支持
  • sr-only：隐藏文字但保留屏幕阅读器可见性

2. 尺寸与颜色控制

Bootstrap 4 提供了灵活的尺寸和配色方案，通过添加以下类名即可调整：

类名效果描述
.spinner-border-sm小尺寸（默认尺寸为中等）
.text-primary主色（蓝色）
.text-danger危险色（红色）

代码示例（不同尺寸和颜色）：

<!-- 大号蓝色加载器 -->
<div class="spinner-border text-primary" style="width: 5rem; height: 5rem;"></div>

<!-- 小号红色加载器 -->
<div class="spinner-border spinner-border-sm text-danger"></div>

3. 与按钮的结合使用

在表单提交或按钮点击时，常需要将加载状态嵌入按钮中。通过 disabled 属性和 spinner-border-sm 组合，可实现无缝过渡：

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

三、进阶用法与场景扩展

1. 自定义动画效果

若需突破默认样式限制，可通过覆盖 CSS 动画属性实现个性化效果。例如调整旋转速度：

.custom-spinner {
  animation: custom-spin 1.5s linear infinite;
}

@keyframes custom-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

配合 HTML：

<div class="spinner-border custom-spinner" role="status"></div>

2. 响应式布局适配

通过结合 Bootstrap 的栅格系统，可让加载状态随屏幕尺寸自动调整位置。例如在表单提交时：

<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3 text-center">
      <div class="spinner-border" role="status"></div>
      <p>Please wait while we process your request.</p>
    </div>
  </div>
</div>

3. 与 AJAX 请求联动

在数据异步加载场景中，可通过 JavaScript 动态控制加载状态的显示与隐藏。例如：

function fetchData() {
  // 显示加载状态
  document.getElementById('loading').style.display = 'block';

  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      // 隐藏加载状态
      document.getElementById('loading').style.display = 'none';
      // 更新页面内容
    });
}

配合 HTML 结构：

<div id="loading" class="d-none spinner-border"></div>

四、完整案例：用户注册表单加载状态

场景描述

当用户提交注册表单时，需在后台验证邮箱和密码期间显示加载状态，并在完成时切换到成功提示。

实现步骤

  1. 基础表单结构：
<form id="registerForm">
  <div class="form-group">
    <label>Email address</label>
    <input type="email" class="form-control" required>
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control" required>
  </div>
  <button type="submit" class="btn btn-success">Register</button>
  <div class="d-none" id="loadingSpinner">
    <div class="spinner-border text-info" role="status"></div>
  </div>
</form>
  1. JavaScript 交互逻辑：
document.getElementById('registerForm').addEventListener('submit', function(event) {
  event.preventDefault();
  
  // 显示加载状态
  document.getElementById('loadingSpinner').classList.remove('d-none');
  
  // 模拟 2 秒的异步请求
  setTimeout(() => {
    // 隐藏加载状态
    document.getElementById('loadingSpinner').classList.add('d-none');
    
    // 显示成功提示
    alert('Registration successful!');
    
    // 重置表单
    this.reset();
  }, 2000);
});
  1. 视觉优化：
    添加过渡动画使状态切换更平滑：
#loadingSpinner {
  transition: opacity 0.3s ease;
}

五、性能优化与注意事项

1. 避免过度使用

加载状态应精准匹配实际处理时间，避免出现以下情况：

  • 虚假等待：无实际处理却显示加载
  • 过早消失：数据未完全加载即隐藏状态

2. 动画性能调优

  • 减少 DOM 操作：优先使用 CSS 动画而非 JavaScript
  • 关键帧优化：避免在动画中使用复杂计算
  • Web Worker：对耗时操作使用后台线程处理

3. 兼容性处理

在老旧浏览器中（如 IE11），可添加 Polyfill 或回退方案：

// 使用 CSS 动画回退
if (!('animation' in document.body.style)) {
  document.body.classList.add('no-css-animation');
}

配合 CSS：

.no-css-animation .spinner-border {
  animation: none !important;
}

六、常见问题解答

Q1: 为什么加载状态不显示？

  • 检查是否遗漏 role="status" 属性
  • 确认样式未被其他 CSS 覆盖
  • 使用浏览器开发者工具检查元素可见性

Q2: 如何让加载状态居中显示？

结合 Bootstrap 的定位类：

<div class="position-absolute top-50 start-50 translate-middle">
  <div class="spinner-border"></div>
</div>

Q3: 如何实现进度条样式？

Bootstrap 4 提供了 progress 组件，可通过以下代码实现：

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

结论

掌握 Bootstrap 4 的加载中效果实现方法，不仅能提升代码效率，更能显著改善用户体验。本文通过从基础组件到实战案例的讲解，展示了如何通过简单配置实现优雅的交互反馈。开发者可根据具体需求，结合 CSS 自定义和 JavaScript 控制，构建出适应复杂场景的加载状态解决方案。

Bootstrap 官方文档（https://getbootstrap.com/docs/4.6/utilities/') 提供了详尽的组件说明，建议读者在项目中不断实践，逐步深化对框架的理解。加载状态的设计虽小，却是构建高质量 Web 应用不可或缺的重要环节。

最新发布

查看更多文章