Skip to main content
Github repo

Theme config

Theme mode
Color palette
Grays
Border radii/radiuses/radiopedes/you know
Border radius
Field border radius
Button border radius
Get CSS
All
Components
Guides
API
Recent
    ↑↓Navigate
    ←→Category
    ↵ Select
    esc Close

    Components

    Spinner

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

    <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 
    <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="ui-link">Link</a>

    Buttons

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

    <!-- Text buttons -->
    <div class="example-row">
      <button aria-busy="true" class="ui-button">Text</button>
      <button aria-busy="true" disabled class="ui-button ui-outlined">
        Outlined
      </button>
      <button aria-busy="true" class="ui-button ui-filled">Filled</button>
    </div>
    

    <!-- Icon buttons -->
    <div class="example-row">
      <button aria-busy="true" class="ui-button">
        <span class="ui-sr-only">Text</span>
      </button>
      <button aria-busy="true" disabled class="ui-button ui-outlined">
        <span class="ui-sr-only">Outlined</span>
      </button>
      <button aria-busy="true" class="ui-button ui-filled">
        <span class="ui-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>

    API

    TypeModifiersDefaultDescription
    Statearia-busy="true"-Renders a spinner pseudo-element on the element. Always indeterminate.
    Sizesfont-size on the element1emSpinner size follows the element's computed font size.
    Excluded<input>, <select>, <textarea>, <html>, <progress>, elements with aria-describedby-Elements that never receive a spinner.

    Installation

    @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.ui-button):not(:empty) {
          &::before {
            margin-inline-end: 0.5em;
          }
        }
      }
    

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