Chi · Spinner

Spinner

Spinners are animated circles that let users know when information is saving or loading.

Examples

To render a spinner, use the class a-spinner.

Backdrop

Wrap spinners in a-backdrop to overlay content similar to a modal.

Base

<div class="a-backdrop">
  <svg class="a-spinner -text--inverse" viewBox="0 0 66 66">
    <title>Loading</title>
    <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
  </svg>
</div>

Inverse

Apply the class -inverse to render spinners on light backgrounds.

<div class="a-backdrop -inverse">
  <svg class="a-spinner -text--brand" viewBox="0 0 66 66">
    <title>Loading</title>
    <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
  </svg>
</div>

Contextual

Spinners in Buttons

<button class="a-btn">
  <div class="a-btn__content">
    <span>Button</span>
    <svg class="a-spinner -text--muted" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
    </div>
  </div>
</button>
<button class="a-btn">
  <div class="a-btn__content">
    <span>Small</span>
    <svg class="a-spinner -text--muted -xs" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
    </div>
  </div>
</button>
<button class="a-btn">
  <div class="a-btn__content">
    <span>Large</span>
    <svg class="a-spinner -text--muted -sm--2" viewBox="0 0 66 66">
      <title>Loading</title>
      <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
    </svg>
    </div>
  </div>
</button>

Spinners in Text Inputs

<div class="a-inputWrapper">
  <input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
  <svg class="a-spinner -text--muted" viewBox="0 0 66 66">
    <title>Loading</title>
    <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
  </svg>
</div>
<div class="a-inputWrapper">
  <input type="text" class="a-input -small" placeholder="Placeholder" value="Sample text">
  <svg class="a-spinner -text--muted -xs" viewBox="0 0 66 66">
    <title>Loading</title>
    <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
  </svg>
</div>
<div class="a-inputWrapper">
  <input type="text" class="a-input -large" placeholder="Placeholder" value="Sample text">
  <svg class="a-spinner -text--muted -sm--2" viewBox="0 0 66 66">
    <title>Loading</title>
    <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
  </svg>
  </div>
</div>

Spinner Sizes

By default, spinners render at 16x16px (-sm).

Apply size classes to render spinners larger or smaller: -xs, -sm, -sm--2, -sm--3, -md, -lg, -xl, -xxl.

<!-- -xs : 12x12px -->
<svg class="a-spinner -xs" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
<!-- -sm : 16x16px -->
<svg class="a-spinner -sm" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
<!-- -md : 32x32px -->
<svg class="a-spinner -md" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
<!-- -lg : 64x64px -->
<svg class="a-spinner -lg" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
<!-- -xl : 96x96px -->
<svg class="a-spinner -xl" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
</div>
<!-- -xxl : 128x128px -->
<svg class="a-spinner -xxl" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>

Spinner Colors

Use text utilities such as -text--brand and -text--muted to change the color of any spinner.

-text--brand

-text--success

-text--warning

-text--danger

-text--info

-text--muted

<svg class="a-spinner -text--brand" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
<svg class="a-spinner -text--success" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
<svg class="a-spinner -text--warning" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
<svg class="a-spinner -text--danger" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
<svg class="a-spinner -text--info" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>
<svg class="a-spinner -text--muted" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>