加载动画 · Bootstrap 6.0 中文文档

Bootstrap “加载动画” 可以用于在你的项目中显示加载状态。它们仅由 HTML 和 CSS 构建，这意味着你不需要任何 JavaScript 就能创建它们。然而，你可能需要一些自定义的 JavaScript 来切换它们的可见性。它们的外观、对齐方式和大小可以通过我们的工具类轻松自定义。

出于无障碍目的，这里的每个加载器都包含role="status"和一个嵌套的<span class="visually-hidden">Loading…</span>。

此组件的动画效果取决于 prefers-reduced-motion 媒体查询。请参阅我们无障碍文档中的减少动画部分。

边框加载动画

使用边框加载动画作为轻量级加载指示器。

加载中

HTML

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

<span class="badge theme-primary">
  <span class="spinner-border" aria-hidden="true"></span>
  <span role="status">Loading</span>
</span>

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

增长型加载圈

如果你不喜欢边框加载动画，可以切换到生长加载动画。虽然它在技术上并不旋转，但它会不断地生长！

HTML

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

变体

加载动画使用 currentColor 来设置其外观，这意味着你可以使用文本颜色工具来自定义颜色。你可以在标准加载动画上使用我们任何文本颜色工具。

[!代码高亮]

HTML

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

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

尺寸

Spinner 默认是 1em 乘以 1em，所有 Add .spinner-sm 来制作一个可以在其他组件中快速使用的更小的 spinner。

HTML

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

或者，使用自定义 CSS 或内联样式根据需要更改尺寸。

HTML

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading…</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading…</span>
</div>

自定义加载动画

你可以使用 .spinner-rotate 类来旋转自定义 SVG 加载图标。

HTML

<svg class="bi spinner-rotate" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentcolor" stroke-width="2" stroke-linecap="round">
  <path d="M8 1V4"/>
  <path opacity="0.8" d="M3.05 3.05L5.17 5.17"/>
  <path opacity="0.6" d="M4 8L1 8"/>
  <path opacity="0.5" d="M5.17 10.83L3.05 12.95"/>
  <path opacity="0.4" d="M8 12V15"/>
  <path opacity="0.3" d="M10.83 10.83L12.95 12.95"/>
  <path opacity="0.2" d="M15 8L12 8"/>
  <path opacity="0.1" d="M12.95 3.05L10.83 5.17"/>
</svg>

CSS

变量

加载动画在.spinner-{border|grow}上使用本地 CSS 变量进行实时自定义。CSS 变量的值是从每个组件唯一的 Sass map生成的，并应用于上述类。

边框旋转代币：

scss/_spinner.scss

// stylelint-disable-next-line scss/dollar-variable-default
$spinner-border-tokens: defaults(
  (
    --spinner-width: 1em,
    --spinner-height: 1em,
    --spinner-border-width: .125em,
    --spinner-animation-speed: 1s,
    --spinner-animation-timing-function: linear,
    --spinner-animation-name: spinner-border,
  ),
  $spinner-border-tokens
);

增长的加载动画代币：

scss/_spinner.scss

// stylelint-disable-next-line scss/dollar-variable-default
$spinner-grow-tokens: defaults(
  (
    --spinner-width: 1em,
    --spinner-height: 1em,
    --spinner-animation-speed: 1s,
    --spinner-animation-timing-function: ease-in-out,
    --spinner-animation-name: spinner-grow,
  ),
  $spinner-grow-tokens
);

关键帧

用于为我们的加载动画创建 CSS 动画。包含在 scss/_spinner.scss 中。

scss/_spinner.scss

@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

scss/_spinner.scss

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}