Bootstrap5 加载效果

Bootstrap5 加载效果是 Bootstrap 可以提供的一组视觉元素。这些元素用来告诉用户系统正在加载数据或需要时间来完成某一操作。这些加载效果可以让用户在等待加载完成的过程中获得良好的用户体验。

准备工作

在使用 Bootstrap5 的加载效果之前需要先加载对应版本的 Bootstrap 样式。可以从官方网站获取最新版的 Bootstrap CSS 文件并添加到 HTML 中。以下是加载 Bootstrap5 样式并添加加载效果的 HTML 示例代码：

<!-- 加载Bootstrap 5的CSS样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@next/dist/css/bootstrap.min.css">

<!-- 添加加载效果的HTML代码 -->
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

加载效果可选属性

Bootstrap5 提供了多种样式的加载效果。例如，可以使用旋转动画，渐变变化等效果。以下是一些常用的加载效果的 HTML 示例代码：

旋转动画

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

渐变变化

<div class="spinner-grow 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>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

自定义加载效果

用户也可以自定义加载效果。通过在 CSS 中设置不同的样式属性，可以创建独特的视觉效果。例如，以下是一个自定义加载效果的示例代码：

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

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

<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
  <div class="loader"></div>
</div>

结论

在网站应用中，用户需要时常等待页面或其他操作完成。Bootstrap 5 提供了丰富的加载效果，使用户在等待过程中不会感到枯燥无味。以上是 Bootstrap 5 加载效果的基本使用方式和自定义加载效果的示例。

Bootstrap5 列表组 Bootstrap5 卡片