# Loading spinner

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

The Loading spinner reuses Icon's `color` and `size` scales.

| Prop    | Effect                                                           |
| ------- | ---------------------------------------------------------------- |
| `size`  | Sets the spinner dimensions from the shared Icon size scale.     |
| `color` | Sets the stroke color from the shared Icon semantic color scale. |

## Props / API

### `LoadingSpinner`

| Prop    | Type        | Default     | Description                                                          |
| ------- | ----------- | ----------- | -------------------------------------------------------------------- |
| `size`  | `IconSize`  | `"medium"`  | Spinner dimensions. See Icon for the full list of `IconSize` values. |
| `color` | `IconColor` | `"default"` | Stroke color. See Icon for the full list of `IconColor` values.      |

Extends `SVGAttributes<SVGElement>`. All standard SVG attributes are forwarded to the underlying `<svg>` via `...rest`. `size` and `color` share Icon's `IconSize` and `IconColor` scales.

## Code examples

```tsx
import { LoadingSpinner } from "@mylighthouse/prism-react";

export default function LoadingSpinnerExample(): React.JSX.Element {
  return (
    <div role="status">
      <LoadingSpinner color="emphasis" size="large" />
      <span>Loading…</span>
    </div>
  );
}
```

## A11y intent

_[Design to fill]_

- The `<svg>` is rendered with `aria-hidden="true"`, so the spinner itself is not announced. Convey the loading status on a surrounding element, for example a wrapper with `role="status"` and a visible or visually hidden label.
- Never rely on the spinning motion alone to communicate that content is loading. Pair it with text.

## Cross-references

- **[Button](./button.md)**: uses a loading spinner in its loading state.
- **[Icon](./icon.md)**: source of the shared `IconSize` and `IconColor` scales used by `size` and `color`.