# Spinner

## Usage

To create a spinner, add the `data-z-spinner` attribute to a block element.

```html
<div data-z-spinner></div>
```

```html
<div data-z-spinner></div>
```

## Ratio

Add the `ratio: 3` parameter to the `data-z-spinner` attribute to triple its size – or any other number, depending on how big you want the spinner to be.

```html
<div data-z-spinner="ratio: 3"></div>
```

```html
<span class="mr" style="--mr: 2" data-z-spinner="ratio: 3"></span>
<span data-z-spinner="ratio: 4.5"></span>
```

## Accessibility

The Spinner component automatically sets the appropriate WAI-ARIA roles, states and properties.

- The _spinner_ has the `status` role.