Spinner

基础反馈

基于 Bootstrap 5 的加载指示器组件，用于表明组件或页面的加载状态，支持 border/grow 两种动画、8 种颜色变体、sm 尺寸与自定义尺寸，以及按钮内使用

Component Demo

Basic usage and examples of the Spinner component

基础用法

边框加载器默认渲染 `spinner-border` 类，配合视觉隐藏文本可让屏幕阅读器朗读加载状态

动画类型

`border` 为旋转边框动画，`grow` 为反复缩放淡入的生长动画

颜色变体

variant 渲染 `text-*` 类为加载器着色，两种动画均支持全部主题色

尺寸

size="sm" 渲染 `spinner-border-sm`/`spinner-grow-sm` 小尺寸类；任意尺寸均可通过内联样式调整

按钮中使用

在禁用按钮内使用 `as="span"` 与 `aria-hidden="true"` 渲染小尺寸加载器，并为可见或视觉隐藏的文案添加 `role="status"`

对齐与边距

加载中...

加载器默认不占满整行，可配合 flex 工具类与边距类（如 `ms-auto`）实现对齐

交互示例

通过 state 控制按钮的加载状态，当前状态：空闲

API Documentation

Complete API reference for the Spinner component

Props

属性名	类型	默认值	描述
`animation`	`SpinnerAnimation`	`'border'`	动画类型，`border` 渲染 `spinner-border` 类，`grow` 渲染 `spinner-grow` 类
`as`	`ElementType`	`'div'`	渲染的根元素类型，在按钮内使用时建议传入 `span`
`children`	`ReactNode`	-	加载器内容，通常为视觉隐藏文本（如 `<span className="visually-hidden">`），向屏幕阅读器描述加载状态
`className`	`string`	-	自定义类名
`role`	`string`	`'status'`	无障碍角色，告知屏幕阅读器这是一个状态区域；在按钮内使用时可通过 `aria-hidden` 隐藏
`size`	`SpinnerSize`	-	加载器尺寸，`sm` 渲染 `spinner-border-sm`/`spinner-grow-sm` 类；自定义尺寸请使用内联样式
`variant`	`SpinnerVariant`	-	颜色变体，渲染 `text-*` 类改变加载器颜色
`...rest`	`HTMLAttributes`	-	根元素的所有原生属性（如 `aria-hidden`、`style` 等）

Type Definitions

SpinnerAnimation

加载器动画类型

export type SpinnerAnimation = 'border' | 'grow';

SpinnerProps

加载器组件属性接口

export interface SpinnerProps extends HTMLAttributes<HTMLElement> {
  animation?: SpinnerAnimation;
  as?: ElementType;
  children?: ReactNode;
  className?: string;
  role?: string;
  size?: SpinnerSize;
  variant?: SpinnerVariant;
}

SpinnerSize

加载器尺寸类型

export type SpinnerSize = 'sm';

SpinnerVariant

加载器颜色变体类型

export type SpinnerVariant =
  'danger' | 'dark' | 'info' | 'light' | 'primary' | 'secondary' | 'success' | 'warning';