组件 · 反馈

Spinner 加载指示

旋转加载指示器，可配置尺寸与颜色。

入口 @selrux/ui/spinner · 源码 src/components/spinner/index.ts · 1 个组件 · 发布状态 preview

使用建议

tsx

import { Spinner } from '@selrux/ui/spinner';

调节下方可实现的字面量属性，实时预览真实组件。函数、Portal、样式逃生口等见代码演示与 API 表。

加载中

label 为读屏文本（必填），labelVisible 时同时显示。

加载中正在同步

语义色与尺寸。

primarysuccesswarningdestructivexsmdxl2xl

indicator 替换默认图形，rotate={false} 关闭旋转；decorative={false} 表示此 Spinner 承担状态说明（默认值）。

正在导出排队中

属性覆盖：示例用到 7 / 7 个自有属性（100%）

由 scripts/demo-coverage.mjs 统计，不含 className / style / 原生透传属性与纯转发事件。

为加载状态添加静态 CSS 和有限视觉选项；ref 指向根 span。

属性	说明	类型	默认值
`decorative`	默认保留 status 语义。	`boolean`	-
`label`	唯一状态文字；不通过默认中文猜测业务语言。	`string`	-
`indicator`	可选本地 SVG/装饰元素；整个插槽始终 aria-hidden 且 inert。	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`size`	图形直径按 B × 档位 × diameter-factor 计算；默认 Provider → md。	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`Provider`
`color`	指示符颜色，默认 current；提示文字始终保持宿主文字色。	`"info" \| "success" \| "warning" \| "primary" \| "destructive" \| "carbon" \| "secondary" \| "accent" \| "current"`	`current`
`labelVisible`	默认仅辅助技术可读；true 时在图形后显示同一份文字。	`boolean`	-
`rotate`	是否旋转指示符容器，默认 true；自带动画的指示符请设 false。	`boolean`	`true`
`children`	Spinner 不包裹业务内容。	`undefined`	-

另有 96 项原生属性与事件继承自 HTMLAttributes，原样透传。

导出类型：SpinnerColor、SpinnerProps、SpinnerSize

摘自源码 JSDoc。