Bootstrap5 加载效果

Bootstrap 5 加载效果知识点汇总

适合编程小白的学习指南 – 通俗易懂讲解加载效果组件

什么是加载效果？

加载效果（Spinners）是网页中常见的UI元素，用于表示内容正在加载中、处理中或等待状态。它就像手机上的”加载圆圈”或电脑上的”旋转光标”，告诉用户系统正在工作。

在Bootstrap 5中，加载效果组件简单易用，不需要复杂的JavaScript代码，只需添加一些HTML和CSS类就能创建漂亮的加载动画。

1. 基本加载效果

Bootstrap提供了两种基本加载动画：

边框旋转器：通过旋转边框实现动画效果
生长旋转器：通过缩放大小实现动画效果

边框旋转器

                                <div class=“spinner-border text-primary” role=“status”>

                                  <span class=“visually-hidden”>加载中…</span>

                                </div>

生长旋转器

                                <div class=“spinner-grow text-success” role=“status”>

                                  <span class=“visually-hidden”>加载中…</span>

                                </div>

2. 颜色变化

Bootstrap提供了多种颜色选择，只需更改text-*类：

边框旋转器颜色

                                <!– 使用text-*类改变颜色 –>

                                <div class=“spinner-border text-primary”>…

                                <div class=“spinner-border text-success”>…

                                <div class=“spinner-border text-danger”>…

生长旋转器颜色

                                <div class=“spinner-grow text-primary”>…

                                <div class=“spinner-grow text-success”>…

                                <div class=“spinner-grow text-danger”>…

3. 大小调整

通过添加.spinner-border-sm或.spinner-grow-sm类可以创建更小的加载动画：

小尺寸边框旋转器

                                <div class=“spinner-border spinner-border-sm” role=“status”>

                                  <span class=“visually-hidden”>加载中…</span>

                                </div>

自定义大小

通过CSS直接设置width和height属性：

                                <div class=“spinner-border” style=“width: 3rem; height: 3rem;” role=“status”>

                                  <span class=“visually-hidden”>加载中…</span>

                                </div>

4. 按钮中的加载效果

加载动画经常用在按钮中，表示按钮触发的操作正在进行中。

按钮中的边框旋转器

                                <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>

5. 高级用法：控制显示/隐藏

在实际项目中，我们需要通过JavaScript控制加载效果的显示和隐藏。

简单JavaScript控制

点击按钮显示/隐藏加载效果：

                                // HTML

                                <div id=“demoSpinner” class=“spinner-border text-primary” style=“display: none;”>…

                                // JavaScript

                                document.getElementById(‘toggleSpinner’).addEventListener(‘click’, function() {

                                  var spinner = document.getElementById(‘demoSpinner’);

                                  if(spinner.style.display === ‘none’) {

                                    spinner.style.display = ‘block’;

                                  } else {

                                    spinner.style.display = ‘none’;

                                  }

                                });

6. 可访问性最佳实践

为了确保所有用户（包括使用屏幕阅读器的用户）都能理解加载状态，我们需要添加一些可访问性属性。

正确的可访问性设置

                                <div class=“spinner-border” role=“status”>

                                  <span class=“visually-hidden”>加载中…</span>

                                </div>

重要属性：

role="status" – 告诉辅助设备这是一个状态指示器
visually-hidden – 对视觉用户隐藏但屏幕阅读器可以读取的文本
在按钮中使用时，添加aria-hidden="true"避免重复读取

7. 实际应用场景

⏳

表单提交

用户提交表单时显示加载效果，避免重复提交

🔄

数据加载

页面加载新数据或刷新内容时显示加载状态

⏱️

耗时操作

执行需要等待的操作时（如下载、处理文件）

提示： 加载效果应该清晰可见但不过分显眼，持续时间不宜过长（超过5秒应考虑进度条）