跳到主要内容
在 GitHub 查看原文

加载动画

使用 Bootstrap 加载指示器显示组件或页面的加载状态，完全由 HTML 和 CSS 构建，无需 JavaScript。

本页目录

关于

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>

颜色

边界加载动画使用 currentColor 为了它的 border-color, 意思是你可以自定义颜色 文本颜色工具你可以在标准加载器上使用我们任何文本颜色工具。

HTML
<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>

为什么不使用 border-color 工具类？ 每个边框加载圈至少为一侧指定了 transparent 边框，因此 .border-{color} 工具类会覆盖它。

增长型加载圈

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

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

再次，这个加载动画是用 currentColor 构建的，所以你可以轻松使用 文本颜色工具 来更改其外观。这里它是蓝色的，以及支持的变体。

HTML
<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

对齐

Bootstrap 中的加载动画是用 rems、currentColor 和 display: inline-flex 构建的。这意味着它们可以轻松调整大小、重新着色，并快速对齐。

保证金

使用 边距工具，如 .m-5 来轻松设置间距。

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

职位安排

使用 Flexbox 工具、浮动工具 或 文本对齐 工具，在任何情况下将加载指示器准确放置在所需位置。

弹性

HTML
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
加载中...
HTML
<div class="d-flex align-items-center">
  <strong role="status">Loading...</strong>
  <div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>

浮点数

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

文本对齐

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

尺寸

将 .spinner-border-sm 和 .spinner-grow-sm 相加，制作一个更小的加载动画，可以在其他组件中快速使用。

HTML
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-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>

按钮

在按钮中使用加载指示器，以显示操作正在进行或正在处理。你也可以将文本从加载指示器元素中替换出来，并根据需要使用按钮文本。

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

CSS

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，加载动画现在在 .spinner-border 和 .spinner-grow 上使用本地 CSS 变量，以增强实时自定义能力。CSS 变量的值通过 Sass 设置，因此仍然支持 Sass 自定义。

边框加载动画变量：

scss/_spinners.scss
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;

增长的加载动画变量：

scss/_spinners.scss
--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;

对于两个加载动画，都使用小型加载动画修饰类根据需要更新这些 CSS 变量的值。例如，.spinner-border-sm 类执行以下操作：

scss/_spinners.scss
--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass 变量

scss/_variables.scss
$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

关键帧

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

scss/_spinners.scss
@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
scss/_spinners.scss
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}