加载指示 Spinners

加载指示（旋转器）用于告知用户「内容正在加载 / 操作正在处理」。它完全由 HTML 与 CSS 构建，无需 JavaScript，外观、对齐与大小都能通过实用类轻松调整。

边框旋转器

最基础的加载指示，由一圈半透明边框加一段高亮边旋转而成。出于可访问性考虑，加上 role="status" 与屏幕阅读器可见的隐藏文字。

HTML 示例

不喜欢边框样式？可以换成 spinner-grow：它技术上并不旋转，而是不断「呼吸」式地放大缩小。

HTML 示例

旋转器使用 currentColor 作为边框色，因此配合文本颜色实用类（text-primary 等）即可换色；不要用 border-* 类，它会覆盖掉必须的透明边框。

HTML 示例

添加 spinner-border-sm / spinner-grow-sm 得到小号旋转器；也可以用内联样式自由指定宽高。

HTML 示例

在按钮里放入小号旋转器，即可表达「正在处理」。标准做法是按钮 disabled 不可点，内部放 spinner-border-sm 或 spinner-grow-sm。点击下方交互按钮：按钮会切换为加载状态并禁用，1.5 秒后自动还原。

点击下方按钮体验真实的加载—完成切换。

HTML 示例

旋转器是 inline-flex 构建的，可以用 Flex 工具类轻松居中，或与文字并排组合使用。

正在同步你的数据...

HTML 示例