# Stefan's Spinners

> A collection of 60 accessible CSS loading indicators for React and the web, created by Stefan Mihajlovic. MIT licensed.

## Documentation

- [Complete documentation](https://spinners.stefanmihajlovic.com/llms-full.txt): Installation, all component names, props, examples, accessibility, and CSS-only usage.
- [Interactive gallery](https://spinners.stefanmihajlovic.com/): Preview and customize all 60 spinners.
- [Source code](https://github.com/Stefan-Mihajlovic/stefans-spinners): TypeScript source, CSS, and tests.
- [npm package](https://www.npmjs.com/package/stefans-spinners): stefans-spinners.

## Quick start

Install: npm install stefans-spinners

Import a named React component; styles load automatically in the browser:

```tsx
import { Orbit } from 'stefans-spinners';

<Orbit size={32} color="currentColor" speed={1.2} label="Loading" />
```

React 18 or later. Styles are included automatically, once per browser document. Animations use CSS. For server HTML styled before JavaScript loads, React Server Components without a browser import, or a CSP that blocks inline stylesheets, optionally load stefans-spinners/styles.css in the app root.

## Shape customization

Every spinner has its own numeric shape props, such as Arc.arcLength, Arc.borderRadius, Ring.strokeWidth, Bars.borderRadius, Bloom.petalWidth, and Chase.dotSize. See the Shape controls section in llms-full.txt for the full per-component list and units. The gallery updates the React example live.