Bootstrap5 旋转器（Spinners）

https://v5.bootcss.com/docs/components/spinners/

Bootstrap 的旋转器（spinners）用于指示组件或页面的加载状态，该组件是纯粹使用 HTML 和 CSS 实现的，没有任何 JavaScript 代码。

环状旋转器（Border spinner）

https://v5.bootcss.com/docs/components/spinners/#%E7%8E%AF%E7%8A%B6%E6%97%8B%E8%BD%AC%E5%99%A8border-spinner

创建一个环状选择器

使用环状旋转器（border spinner）作为轻量级的加载指示器。要创建环状选择器，可以添加类.spinner-border。

例如：

设置颜色

https://v5.bootcss.com/docs/components/spinners/#%E9%A2%9C%E8%89%B2

环状旋转器（border spinner）使用 currentColor 来设置其 border-color，这意味着你可以使用 文本颜色工具类 来自定义其颜色。你可以将任何文本颜色工具类应用到标准的旋转器（spinner）上。

为什么不使用 border-color 工具类呢？ 因为每个环状旋转器（ border spinner）至少为一个侧边设置了 transparent （透明）边框，而 .border-{color} 工具类将会覆盖该设置。

例如，使用.text-primary类的颜色：

增长式旋转器（Growing spinner）

创建增长式旋转器

添加类.spinner-grow来创建增长式选择器。从技术来说它不是在旋转，但它是反复由小变大的。

修改增长式选择器的颜色

同样，这个旋转器也是使用 currentColor 来设置其 border-color 的，因此你可以使用 文本颜色工具类 轻松更改其外观。

例如：

设置旋转器的大小

https://v5.bootcss.com/docs/components/spinners/#%E5%B0%BA%E5%AF%B8

通过添加 .spinner-border-sm 和 .spinner-grow-sm 类可以让旋转器（spinner）变得更小，以便在其它组件中使用。

例如：

按钮

https://v5.bootcss.com/docs/components/spinners/#%E6%8C%89%E9%92%AE

在按钮中使用旋转器（spinners）来指示当前正在处理或正在进行的操作。还可以将旋转器（spinner）中包含的（提示性）文字去掉并使用按钮中包含的文字作为提示性信息。

例如：
环状旋转器：

增长式旋转器：

禁用按钮：