Spinners微调器

~~Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.~~使用Bootstrap微调器指示组件或页面的加载状态，该微调器完全使用HTML、CSS构建，不使用JavaScript。

~~On this page~~本页内容

About关于

~~Bootstrap “spinners” can be used to show the loading state in your projects.~~ Bootstrap“微调器”可用于显示项目中的加载状态。~~They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them.~~ 它们只使用HTML和CSS构建，这意味着您不需要任何JavaScript来创建它们。~~You will, however, need some custom JavaScript to toggle their visibility.~~ 但是，您需要一些自定义JavaScript来切换它们的可见性。~~Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.~~它们的外观、对齐方式和大小可以通过我们令人惊叹的实用程序类轻松定制。

~~For accessibility purposes, each loader here includes role="status" and a nested <span class="visually-hidden">Loading...</span>.~~为了便于访问，此处的每个加载程序都包括role="status"和嵌套的<span class="visually-hidden">Loading...</span>。

~~The animation effect of this component is dependent on the prefers-reduced-motion media query.~~ 此组件的动画效果取决于prefers-reduced-motion媒体查询。~~See the reduced motion section of our accessibility documentation.~~请参阅我们的易访问性文档中的简化运动部分。

Border spinner带边框的微调器

~~Use the border spinners for a lightweight loading indicator.~~使用边框微调器作为轻量级加载指示器。

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

Colors彩色

~~The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities.~~ 带边框的微调器使用currentColor作为border-color，这意味着您可以使用文本颜色实用程序自定义颜色。~~You can use any of our text color utilities on the standard spinner.~~您可以在标准微调器上使用我们的任何文本颜色实用程序。

<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?~~为什么不使用border-color实用工具？ ~~Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.~~每个边框微调器至少为一面指定一个transparent边框，因此.border-{color}实用程序将覆盖该边框。

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!~~虽然从技术上讲它不会旋转，但它确实会反复增长！

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

~~Once again, this spinner is built with currentColor, so you can easily change its appearance with text color utilities.~~ 同样，此微调器是使用currentColor构建的，因此您可以使用文本颜色实用程序轻松更改其外观。~~Here it is in blue, along with the supported variants.~~这里是蓝色的，以及支持的变体。

<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对齐

~~Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex.~~ Bootstrap中的微调器是使用rem、currentColor和display: inline-flex构建的。~~This means they can easily be resized, recolored, and quickly aligned.~~这意味着它们可以轻松地调整大小、重新着色和快速对齐。

Margin边距

~~Use margin utilities like .m-5 for easy spacing.~~使用诸如.m-5之类的边距实用程序以方便间距。

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

Placement安置

~~Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.~~使用flexbox实用程序、浮动实用程序或文本对齐实用程序可以在任何情况下将微调器精确放置在需要的位置。

Flex

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

Loading...

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

Floats

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

Text align

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

Size大小

~~Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.~~添加.spinner-border-sm和.spinner-grow-sm以生成一个较小的微调器，可以在其他组件中快速使用。

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

~~Or, use custom CSS or inline styles to change the dimensions as needed.~~或者，根据需要使用自定义CSS或内联样式更改尺寸。

<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.~~还可以根据需要将文本从微调器元素中调出，并使用按钮文本。

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

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

Sass

Variables变量

$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关键帧

~~Used for creating the CSS animations for our spinners.~~ 用于为微调器创建CSS动画。~~Included in scss/_spinners.scss.~~包含在scss/_spinners.scss中。

@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

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