` |
| `containerClassName` | `string` | —— 说 | 适用于外包装的类别 `
` |
| `children` | `ReactNode` | —— 说 | 覆盖的内容 |
加起来 `Spinner` 道具来.
* * *
### `
`
为每集设定全局默认值 `Spinner`\- 树下的家庭成分 单个道具覆盖上下文值.
```tsx
// Inside: no props needed — picks up context defaults
```
| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `defaultName` | `SpinnerName` | `"braille"` | 默认自旋器名称 |
| `defaultColor` | `string` | `undefined` | 默认颜色 |
| `defaultSize` | `string | number` | `undefined` | 默认格子大小 |
| `defaultSpeed` | `number` | `1` | 默认速度乘数 |
| `defaultShape` | `"circle" | "square" | "diamond"` | `undefined` | 默认点形状 |
| `respectReducedMotion` | `boolean` | `true` | 当操作系统出现时暂停动画 `prefers-reduced-motion: reduce` |
* * *
## `useSpinner` 钩子
为完全自定义渲染而驱动任何带有生框字符串的元素 .
```tsx
import { useSpinner } from 'cli-loaders';
function MyComponent() {
const frame = useSpinner('helix', 1.5);
return (
{frame}
);
}
```
```ts
useSpinner(
name: SpinnerName,
speed?: number, // default 1
paused?: boolean, // default false
ignoreReducedMotion?: boolean // default false
): string
```
### `useSpinnerFrames`
返回最后一个滑动窗口 `length` 框架——后面的原始 `SpinnerTrail`。 。 。 .
```ts
useSpinnerFrames(
name: SpinnerName,
length?: number, // default 3
speed?: number,
paused?: boolean,
ignoreReducedMotion?: boolean
): string[]
```
* * *
## 可用的旋转器
所有19个名字都作为 `SpinnerName` 工会类型.
```ts
import { spinnerNames } from 'cli-loaders';
// ['braille', 'braillewave', 'dna', ...]
```
* * *
## 无障碍
- 动画格言被包裹在 `aria-hidden="true"` ——屏幕阅读器是看不见的.
- 一个隐藏的视觉 `` 公布 `label` 道具( 默认 ): `"Loading"`) (中文(简体) ).
- `SpinnerButton` 套装 `aria-busy` 财务报告和审定财务报表 `aria-disabled` 自动打开按钮元素.
- `SpinnerOverlay` 套装 `aria-busy` 在容器上使用原生的 `inert` 属性来防止键盘/AT访问模糊内容.
- 默认情况下,所有动画都尊重 `prefers-reduced-motion: reduce`覆盖每个组件 `ignoreReducedMotion` 或全球通过 ``。 。 。 .
* * *
* * *
## 财务问题
**我可以用这个和Next.js一起吗?** 对 在 App 路由器中同时作为客户端和服务器组件工作.
**我如何定制旋转动画?** 使用 `useSpinner` 钩来驱动任何自定义渲染 。 见 [使用 Spinner 钩头](https://npmcn.com/package/%40agilek/cli-loaders/#readme-usespinner-hook) 用于实例.
**这对 TypeScript 有用吗 ?** 完全类型支持. 所有组件道具和 `DotShape` 类型为类型安全导出.
**我如何改变形状(圆圈、方块、钻石)?** 使用 `shape` 道具 : ``。见 [旋转道具](https://npmcn.com/package/%40agilek/cli-loaders/#readme-spinner) 详细情况.
**这种支持是否减少了运动偏好?** 是的,默认的。 动画暂停当 `prefers-reduced-motion: reduce` 已经设定。 覆盖 `ignoreReducedMotion={true}`。 。 。 .
**捆绑大小是多少?** ~ 15KB 为核心库提供gzipped. SVG渲染模式增加了~1KB.
* * *
## 常见模式
### 提交装入状态的表格
```tsx
const [loading, setLoading] = useState(false);
async function handleSubmit() {
setLoading(true);
try {
await api.post('/submit', data);
} finally {
setLoading(false);
}
}
return (
{loading ? 'Submitting...' : 'Submit'}
);
```
### 全屏加载覆盖
```tsx
const [fetching, setFetching] = useState(false);
return (
);
```
### 带有形状定制的内嵌状态消息
```tsx
return (
Syncing your data...
);
```
* * *
## 捐款
欢迎虫子报告和拉出请求 请在提交大修改前打开一个问题 .
```sh
# Install dependencies
npm install
# Start the interactive demo
npm run dev
# Build the library
npm run build
```
* * *
## 许可证
[麻省理工学院](https://npmcn.com/package/%40agilek/cli-loaders/LICENSE)
## 常见问题
### @agilek/cli-loaders 是什么？
盲文单码自旋器作为回放装饰组件
### 如何安装 @agilek/cli-loaders？
在项目目录运行 npm install @agilek/cli-loaders，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @agilek/cli-loaders 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @agilek/cli-loaders 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @agilek/cli-loaders 可以商用吗？
@agilek/cli-loaders 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @agilek/cli-loaders 的下载量有多少？
根据 npm 官方下载统计，@agilek/cli-loaders 在 2026/10/05 – 2026/11/03 这 30 天内被下载 43,061 次，日均约 1,435 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @agilek/cli-loaders 还在维护吗？
最新版本 1\.1\.0 发布于 2026/03/22（7 个月前）；至今共发布 4 个版本，其中过去 12 个月发布了 4 个；首次发布于 2026/03/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。