# Spinner

> Inline loading indicator. Em-based sizing and inherits color from surrounding text.

Source: https://ngwr.dev/reference/components/spinner  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrSpinner } from 'ngwr/spinner';

@Component({ imports: [WrSpinner] })
export class MyComponent {}
```

## Basic usage

```html
<wr-spinner />
```

## Sizes

```html
<wr-spinner size="sm" />
<wr-spinner size="md" />
<wr-spinner size="lg" />
```

## Color

The spinner uses currentColor — set color on the parent to tint it.

```html
<div style="color: var(--wr-color-primary)">
  <wr-spinner />
</div>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `size` | Size variant. Em-based — scales with surrounding font-size. | `WrSpinnerSize` | `'md'` |
| `ariaLabel` | Accessible name for the live region. Falls back to `spinner.label`, then `'Loading'` — which the host used to carry as a hard-coded attribute, while the catalog had the translated key for it all along. | `string \| null` | `null` |

## CSS variables

Custom properties `ngwr/spinner` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-spinner-size` | `1.25em` | `.wr-spinner` +2 variant overrides |