Components

Spinner

Add it to an element with aria-busy="true". Spinners are always indeterminate. See also: Progress bar.

Astro

<div aria-busy="true"></div>

Output

<div aria-busy="true"></div>

Sizes

The spinner's size is set to 1em, which means it will adjust to its current font size.

h2

h4

Paragraph

Span Link

Astro

<h2 aria-busy="true">h2</h2>
<h4 aria-busy="true">h4</h4>
<p aria-busy="true">Paragraph</p>
<span aria-busy="true">Span</span>
<a href="#sizes" aria-busy="true" class="link">Link</a>

Output

<h2 aria-busy="true">h2</h2>
<h4 aria-busy="true">h4</h4>
<p aria-busy="true">Paragraph</p>
<span aria-busy="true">Span</span>
<a href="#sizes" aria-busy="true" class="link">Link</a>

Buttons

Simply add aria-busy="true" to a <button>.

Astro

---
import { Button } from "@opui/astro"
---

<div class="example-row">
  <Button aria-busy="true">Text</Button>
  <Button aria-busy="true" disabled variant="outlined"> Outlined </Button>
  <Button aria-busy="true" variant="filled">Filled</Button>
</div>

<div class="example-row">
  <Button aria-busy="true">
    <span class="sr-only">Text</span>
  </Button>
  <Button aria-busy="true" disabled variant="outlined">
    <span class="sr-only">Outlined</span>
  </Button>
  <Button aria-busy="true" variant="filled">
    <span class="sr-only">Filled</span>
  </Button>
</div>

Output

<div class="example-row">
  <button aria-busy="true" class="button">Text</button
  ><button disabled aria-busy="true" class="button disabled outlined">
    Outlined</button
  ><button aria-busy="true" class="button filled">Filled</button>
</div>
<div class="example-row">
  <button aria-busy="true" class="button">
    <span class="sr-only">Text</span></button
  ><button disabled aria-busy="true" class="button disabled outlined">
    <span class="sr-only">Outlined</span></button
  ><button aria-busy="true" class="button filled">
    <span class="sr-only">Filled</span>
  </button>
</div>

When not to use `aria-busy="true"`

There are a few exceptions where aria-busy="true" won't render a spinner. Either because it doesn't make sense or because there are other reasons you would like to use that aria attribute.

1. Because it's blocked by another use case

In conjunction with the <progress> element aria-busy="true" is used on the section that is being updated. Rendering a spinner here would result in a spinner and a progress bar which doesn't make sense.

See progress accessibility section for more.

2. Because it doesn't make sense

<input>
<select>
<textarea>
<html>
<progress>

Installation

spinner.css

@layer components.root {

  [aria-busy="true"]:not(input,
    select,
    textarea,
    html,
    progress,
    [aria-describedby]) {
    position: relative;

    &::before {
      animation: spin 0.7s linear infinite;
      block-size: 1em;
      border-color: transparent currentColor currentColor;
      border-radius: 50%;
      border-style: solid;
      border-width: 3px;
      content: "";
      display: inline-block;
      inline-size: 1em;
      opacity: 0.5;
      vertical-align: -0.14em;
    }

    &:not(button.button):not(:empty) {
      &::before {
        margin-inline-end: 0.5em;
      }
    }
  }

  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
}

Spinner

Sizes

h2

h4

Buttons

When not to use aria-busy="true"

1. Because it's blocked by another use case

2. Because it doesn't make sense

Installation

When not to use `aria-busy="true"`