下拉列表

使用 Bootstrap 加载控件指示组件或页面的加载状态，完全使用 HTML、CSS 构建，无 JavaScript。

关于

¥About

Bootstrap “spinners” 可用于显示项目中的加载状态。它们仅使用 HTML 和 CSS 构建，这意味着你不需要任何 JavaScript 来创建它们。但是，你将需要一些自定义 JavaScript 来切换它们的可见性。它们的外观、对齐和尺寸可以通过我们令人惊叹的工具类轻松定制。

¥Bootstrap “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.

出于可访问性的目的，这里的每个加载器都包含 role="status" 和嵌套的 <span class="visually-hidden">Loading...</span>。

¥For accessibility purposes, each loader here includes role="status" and a nested <span class="visually-hidden">Loading...</span>.

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

边框旋转器

¥Border spinner

使用边框旋转器作为轻量级加载指示器。

¥Use the border spinners for a lightweight loading indicator.

html

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

颜色

¥Colors

边框加载控件使用 currentColor 作为 border-color，这意味着你可以使用 [文本颜色工具][颜色] 自定义颜色。你可以在标准加载控件上使用我们的任何文本颜色工具。

¥The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.

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>

Why not use border-color utilities? Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.

种植旋转器

¥Growing spinner

如果你不喜欢边框旋转器，请切换到生长旋转器。虽然从技术上讲它并不旋转，但它确实会反复生长！

¥If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!

html

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

再一次，这个加载控件是用 currentColor 构建的，因此你可以使用[文本颜色工具][颜色]轻松更改其外观。这里它是蓝色的，以及支持的变体。

¥Once again, this spinner is built with currentColor, so you can easily change its appearance with text color utilities. Here it is in blue, along with the supported variants.

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>

对其

¥Alignment

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

¥Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.

外边距

¥Margin

使用 [边距工具][边距]（如 .m-5）以方便间距。

¥Use margin utilities like .m-5 for easy spacing.

html

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

放置

¥Placement

使用 flexbox 工具、float 工具或[文本对齐][文本]工具可以在任何情况下将加载控件准确放置在你需要的位置。

¥Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.

弹性

¥Flex

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Loading...

html

<div class="d-flex align-items-center">
  <strong role="status">Loading...</strong>
  <div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>

浮动

¥Floats

html

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

文本对齐

¥Text align

html

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

尺寸

¥Size

添加 .spinner-border-sm 和 .spinner-grow-sm 以制作一个较小的旋转器，可以快速在其他组件中使用。

¥Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.

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 或内联样式根据需要更改尺寸。

¥Or, use custom CSS or inline styles to change the dimensions as needed.

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>

按钮

¥Buttons

使用按钮内的旋转图标来指示当前正在处理或正在发生的操作。你还可以将文本从加载控件元素中交换出来，并根据需要使用按钮文本。

¥Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

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

变量

¥Variables

Added in v5.2.0

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

¥As part of Bootstrap’s evolving CSS variables approach, spinners now use local CSS variables on .spinner-border and .spinner-grow for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

边框加载控件变量：

¥Border spinner variables:

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;

不断增长的微调变量：

¥Growing spinner variables:

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 类执行以下操作：

¥For both spinners, small spinner modifier classes are used to update the values of these CSS variables as needed. For example, the .spinner-border-sm class does the following:

scss/_spinners.scss

--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass 变量

¥Sass variables

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;

关键帧

¥Keyframes

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

¥Used for creating the CSS animations for our spinners. Included in 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;
  }
}