Bootstrap5 加载效果学习笔记

一、为什么要学习Bootstrap5的加载效果？

Bootstrap5是目前最流行的前端框架之一，它提供了大量的UI组件和工具，可以帮助我们快速构建漂亮、响应式的网站。其中，加载效果又是一个非常重要的方面，在页面加载过程中为用户带来更好的体验。

二、如何在Bootstrap5中使用加载效果？

Bootstrap5提供了多种不同的加载效果，我们可以根据需要选择合适的效果进行使用。

1. Spinners

Spinners是一种基本的加载效果，它可以在页面加载或操作过程中显示一个旋转的图标，让用户知道操作正在进行中。

使用方法：

htmlCopy Code
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

2. Skeleton Screens

Skeleton Screens是一种比较流行的加载效果，它可以在页面加载过程中先显示一个占位符，然后再逐渐替换为真正的内容，给用户一种渐进的加载体验。

使用方法：

htmlCopy Code
<div class="skeleton-screen">
  <div class="skeleton-line"></div>
  <div class="skeleton-line"></div>
  <div class="skeleton-line"></div>
</div>

3. Progress Bars

Progress Bars可以显示一个进度条，告诉用户目前操作的进度。

使用方法：

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

三、实例

下面是一个使用Spinners的实例：

htmlCopy Code
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

效果如下：

<div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div>

同时，我们也可以将Spinners与其他Bootstrap5组件结合起来使用，比如在按钮上添加Spinners：

htmlCopy Code
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
  Loading...
</button>

效果如下：

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

以上就是Bootstrap5加载效果的学习笔记。