# SvSpinner
An indeterminate spinner: a small spinning ring for "something is happening" when
you cannot show real progress.
`SvSpinner` is a tiny, dependency-free ring that inherits its colour from the
current text colour (so it themes for free) and respects
`prefers-reduced-motion`. Use it inline next to a label, inside a button, or as
the indicator for [SvLoadingOverlay](https://svgrid.com/docs/help/ui-components/sv-loading-overlay/). When you can report
a percentage, prefer [SvProgress](https://svgrid.com/docs/help/ui-components/sv-progress/) or
[SvCircularProgress](https://svgrid.com/docs/help/ui-components/sv-circular-progress/) instead.
Related: [SvLoadingOverlay](https://svgrid.com/docs/help/ui-components/sv-loading-overlay/) · [SvProgress](https://svgrid.com/docs/help/ui-components/sv-progress/) · [SvSkeleton](https://svgrid.com/docs/help/ui-components/sv-skeleton/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvSpinner` starter into your app:
Prefer to see it first? `npx @svgrid/ui try spinner` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvSpinner` ships free in
`@svgrid/grid` (dependency-free):
```ts
import { SvSpinner } from '@svgrid/grid'
```
## Example
> Live demo: Layout & feedback primitives - https://svgrid.com/demos/409-layout-feedback/
```svelte
```
## Props
| Prop | Type | Default | Description |
| ------- | --------------------------------- | ------- | --------------------------------------------------------------------------- |
| `size` | `sm` \| `md` \| `lg` \| `number` | `md` | Diameter. `sm` = 15px, `md` = 20px, `lg` = 28px, or an exact pixel number. |
| `color` | `string` | - | Override the ring colour (defaults to the inherited/accent colour). |
| `label` | `string` | - | Accessible name. When set, the spinner is announced as a `status` region. |
## Accessibility
- With a `label`, the spinner is `role="status"` with `aria-label` set, so screen
readers announce it. Without a `label` it is `aria-hidden` (decorative) - use
this when a nearby visible element already conveys the loading state.
- The animation is disabled under `prefers-reduced-motion: reduce`.
## Sizes and a label
The `label` is not decoration - it is what a screen reader announces. A spinner
with no label is a busy indicator nobody can hear.
```svelte
```
## See also
- [SvLoadingOverlay](https://svgrid.com/docs/help/ui-components/sv-loading-overlay/) - cover a container while it loads.
- [SvProgress](https://svgrid.com/docs/help/ui-components/sv-progress/) / [SvCircularProgress](https://svgrid.com/docs/help/ui-components/sv-circular-progress/) - when you can show a percentage.
- [SvSkeleton](https://svgrid.com/docs/help/ui-components/sv-skeleton/) - placeholder shapes for content that is loading.
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/sv-spinner/ . All docs: https://svgrid.com/llms.txt