` |\n| `containerClassName` | `string` | — | Class applied to the outer wrapper `
` |\n| `children` | `ReactNode` | — | Content that gets overlaid |\n\nPlus all `Spinner` props.\n\n---\n\n### `
`\n\nSets global defaults for every `Spinner`-family component in the subtree. Individual props override context values.\n\n```tsx\n\n \n\n\n// Inside: no props needed — picks up context defaults\n
\n
\n```\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `defaultName` | `SpinnerName` | `\"braille\"` | Default spinner name |\n| `defaultColor` | `string` | `undefined` | Default color |\n| `defaultSize` | `string \\| number` | `undefined` | Default glyph size |\n| `defaultSpeed` | `number` | `1` | Default speed multiplier |\n| `defaultShape` | `\"circle\" \\| \"square\" \\| \"diamond\"` | `undefined` | Default dot shape |\n| `respectReducedMotion` | `boolean` | `true` | Pause animations when the OS has `prefers-reduced-motion: reduce` |\n\n---\n\n## `useSpinner` hook\n\nDrive any element with the raw frame string for fully custom rendering.\n\n```tsx\nimport { useSpinner } from 'cli-loaders';\n\nfunction MyComponent() {\n const frame = useSpinner('helix', 1.5);\n\n return (\n
\n {frame}\n
\n );\n}\n```\n\n```ts\nuseSpinner(\n name: SpinnerName,\n speed?: number, // default 1\n paused?: boolean, // default false\n ignoreReducedMotion?: boolean // default false\n): string\n```\n\n### `useSpinnerFrames`\n\nReturns a sliding window of the last `length` frames — the primitive behind `SpinnerTrail`.\n\n```ts\nuseSpinnerFrames(\n name: SpinnerName,\n length?: number, // default 3\n speed?: number,\n paused?: boolean,\n ignoreReducedMotion?: boolean\n): string[]\n```\n\n---\n\n## Available spinners\n\nAll 19 names are available as the `SpinnerName` union type.\n\n```ts\nimport { spinnerNames } from 'cli-loaders';\n// ['braille', 'braillewave', 'dna', ...]\n```\n\n---\n\n## Accessibility\n\n- The animated glyph is wrapped in `aria-hidden=\"true\"` — it is invisible to screen readers.\n- A visually-hidden `
` announces the `label` prop (default: `\"Loading\"`).\n- `SpinnerButton` sets `aria-busy` and `aria-disabled` on the button element automatically.\n- `SpinnerOverlay` sets `aria-busy` on the container and uses the native `inert` attribute to prevent keyboard/AT access to obscured content.\n- By default, all animations respect `prefers-reduced-motion: reduce`. Override per-component with `ignoreReducedMotion` or globally via ``.\n\n---\n\n---\n\n## FAQ\n\n**Can I use this with Next.js?**\nYes. Works as both client and server components in the App Router.\n\n**How do I customize spinner animations?**\nUse the `useSpinner` hook to drive any custom rendering. See [useSpinner hook](#usespinner-hook) for examples.\n\n**Does this work with TypeScript?**\nFull type support. All component props and the `DotShape` type are exported for type safety.\n\n**How do I change shapes (circles, squares, diamonds)?**\nUse the `shape` prop: ``. See [Spinner props](#spinner) for details.\n\n**Does this support reduced motion preferences?**\nYes, by default. Animations pause when `prefers-reduced-motion: reduce` is set. Override with `ignoreReducedMotion={true}`.\n\n**What's the bundle size?**\n~15KB gzipped for the core library. SVG rendering mode adds ~1KB.\n\n---\n\n## Common Patterns\n\n### Form submission with loading state\n\n```tsx\nconst [loading, setLoading] = useState(false);\n\nasync function handleSubmit() {\n setLoading(true);\n try {\n await api.post('/submit', data);\n } finally {\n setLoading(false);\n }\n}\n\nreturn (\n \n {loading ? 'Submitting...' : 'Submit'}\n \n);\n```\n\n### Full-screen loading overlay\n\n```tsx\nconst [fetching, setFetching] = useState(false);\n\nreturn (\n \n \n \n);\n```\n\n### Inline status message with shape customization\n\n```tsx\nreturn (\n \n Syncing your data...\n \n);\n```\n\n---\n\n## Contributing\n\nBug reports and pull requests are welcome. Please open an issue before submitting large changes.\n\n```sh\n# Install dependencies\nnpm install\n\n# Start the interactive demo\nnpm run dev\n\n# Build the library\nnpm run build\n```\n\n---\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}![\"braille\"](\"assets/spinners/braille.svg\")
\n ![\"orbit\"](\"assets/spinners/orbit.svg\")
\n ![\"breathe\"](\"assets/spinners/breathe.svg\")
\n ![\"braillewave\"](\"assets/spinners/braillewave.svg\")
\n ![\"dna\"](\"assets/spinners/dna.svg\")
\n ![\"waverows\"](\"assets/spinners/waverows.svg\")
\n ![\"helix\"](\"assets/spinners/helix.svg\")
\n ![\"fillsweep\"](\"assets/spinners/fillsweep.svg\")
\n ![\"diagswipe\"](\"assets/spinners/diagswipe.svg\")
\n ![\"scanline\"](\"assets/spinners/scanline.svg\")
\n ![\"line\"](\"assets/spinners/line.svg\")
\n ![\"cascade\"](\"assets/spinners/cascade.svg\")
\n ![\"scan\"](\"assets/spinners/scan.svg\")
\n ![\"rain\"](\"assets/spinners/rain.svg\")
\n ![\"pulse\"](\"assets/spinners/pulse.svg\")
\n ![\"snake\"](\"assets/spinners/snake.svg\")
\n ![\"sparkle\"](\"assets/spinners/sparkle.svg\")
\n ![\"columns\"](\"assets/spinners/columns.svg\")
\n ![\"checkerboard\"](\"assets/spinners/checkerboard.svg\")
\n