Bootstrap5 加载器

Bootstrap 5 提供了多种加载器组件，用于在页面上显示加载状态或进度条。这些加载器组件可以帮助用户理解当前页面的状态，并提升用户体验。

基本加载器

基本加载器是一个简单的旋转圆圈，可以用来表示加载过程正在进行中。使用 spinner-border 类创建一个边框样式的基本加载器，而 spinner-grow 类则创建一个带有渐变效果的加载器。

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

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

边框加载器

边框加载器使用 spinner-border 类，它创建了一个带边框的圆形加载器。

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

渐变加载器

渐变加载器使用 spinner-grow 类，它创建了一个带有渐变效果的圆形加载器。

<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">加载中...</span>
</div>

颜色自定义

你可以通过添加不同的颜色类来改变加载器的颜色。

<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">加载中...</span>
</div>

<div class="spinner-grow text-danger" 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>

<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">加载中...</span>
</div>

改变形状

虽然 Bootstrap 5 的加载器默认为圆形，但你可以通过 CSS 来改变其形状。

// www.javascriptcn.com code example
<style>
  .custom-shape {
    border-radius: 0;
  }
</style>

<div class="spinner-border custom-shape" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">加载中...</span>
</div>

使用加载器

在实际项目中，你可以将加载器与按钮、表单或其他交互元素结合使用，以提示用户操作正在进行中。

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

按钮中的加载器

将加载器嵌入到按钮中，当按钮被点击时显示加载状态。

<button type="button" class="btn btn-primary">
  <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
  点击加载
</button>

自定义加载器

除了使用内置的加载器类之外，你还可以根据需求自定义加载器的样式。

使用 SVG

你可以使用 SVG 图像来创建更复杂的加载动画。

// www.javascriptcn.com code example
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="spinner" viewBox="0 0 50 50">
    <circle cx="25" cy="25" r="20" stroke="currentColor" stroke-width="4" fill="none"/>
  </symbol>
</svg>

<div class="spinner-custom">
  <svg class="spinner" width="50" height="50" viewBox="0 0 50 50">
    <use xlink:href="#spinner" />
  </svg>
</div>

自定义 CSS

使用 CSS 动画来创建独特的加载器效果。

// www.javascriptcn.com code example
<style>
  .custom-loader {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }

  .custom-loader div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: custom-loader 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  }

  .custom-loader div:nth-child(2) {
    animation-delay: -0.5s;
  }

  @keyframes custom-loader {
    0% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }

    40% {
      top: 22px;
      left: 22px;
      width: 80px;
      height: 80px;
      opacity: 1;
    }

    100% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
  }
</style>

<div class="custom-loader">
  <div></div>
  <div></div>
</div>

以上是关于 Bootstrap 5 加载器的详细教程。通过这些示例，你可以轻松地在你的 Web 应用中实现各种类型的加载器，从而改善用户体验。