# Loader

Source: https://iriscss.com/documentation/components/loader/

`aria-busy="true"` shows a spinner before the content, in the text color.

The attribute also tells screen readers that the content is loading. Remove it when the work is done. Form controls cannot show a spinner, so put it on their button or label instead.

```html
<p aria-busy="true">Loading your projects</p>
```

## Buttons and links

A busy button or link keeps its spinner and label on one line. `aria-busy` does not stop the mouse or the keyboard, so also set `aria-disabled="true"`. The button looks disabled but keeps focus, and your script ignores it until the work is done. Announce the result in a `role="status"` region.

```html
<button aria-busy="true" aria-disabled="true">Saving</button>
<button class="primary" aria-busy="true" aria-disabled="true">Uploading</button>
<a href="#" role="button" class="secondary" aria-busy="true" aria-disabled="true">Loading</a>
```

## Spinner only

An empty busy element shows the spinner alone. Give it `role="status"` and a label, so screen readers announce it.

```html
<div aria-busy="true" role="status" aria-label="Loading"></div>
```

## Reduced motion

The spinner keeps turning when the user prefers reduced motion, since it carries meaning. See [user preferences](https://iriscss.com/documentation/accessibility/user-preferences/index.html.md).

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-loader-duration` | `0.75s` | One spinner turn |