Bootstrap 5 加载效果实现方法

m0_748252382026-01-16 15:14

Bootstrap 5 加载效果实现方法

Bootstrap 5 提供了多种方式实现加载效果，主要包括使用内置的 Spinner 组件和自定义 CSS 动画。以下是具体实现方法：

使用内置 Spinner 组件

Bootstrap 5 内置了 Spinner 组件，通过添加 spinner-border 或 spinner-grow 类即可实现旋转或生长的加载动画。

旋转效果：

html 复制代码

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

生长效果：

html 复制代码

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

可以通过添加颜色类改变样式：

html 复制代码

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

调整大小

使用 spinner-border-sm 或 spinner-grow-sm 类调整大小：

html 复制代码

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

按钮加载状态

在按钮中添加 Spinner：

html 复制代码

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

自定义加载动画

通过 CSS 创建自定义加载效果：

css 复制代码

.custom-spinner {
  width: 3rem;
  height: 3rem;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

HTML 中使用：

html 复制代码

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

全屏加载效果

结合 Bootstrap 的实用工具类实现全屏加载：

html 复制代码

<div class="d-flex justify-content-center align-items-center vh-100">
  <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

以上方法可以根据具体需求选择使用，Bootstrap 5 的 Spinner 组件提供了快速实现加载效果的方案，而自定义 CSS 则允许更灵活的样式控制。