# Spinner

A CSS loading spinner (rotating ring) with configurable colour, size, thickness and speed.

**Category:** Components/Utilities/Spinner

**Import:** `import { Spinner } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `colour` | `string` | `'#666'` |  | Primary colour of the spinner. |
| `width` | `number` | `40` |  | Outer width of the spinner |
| `ringWidth` | `number` | `6` |  | Width of the spinner ring |
| `speed` | `number` | `0.8` |  | How fast the spinner spins in seconds |
| `containerPadding` | `number` | `10` |  | Vertical padding for the spinner's container |

## Examples

### Demo

```svelte
<Spinner />
```

## Documentation

# Spinner

The `Spinner` component creates a simple loading spinner. Use it to hide long loading times for components that may be loading expensive media files or crunching through lots of data.

```svelte
<script>
  import { Spinner } from '@reuters-graphics/graphics-components';

  let somethingsLoading = true;
</script>

{#if somethingsLoading}
  <Spinner />
{:else}
  <p>The real deal is here.</p>
{/if}
```