Design Kit

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 m-backdrop to overlay content similar to a modal, and add -center class to position it in the middle of the page.

Base

<div class="m-backdrop -center">
  <div class="m-backdrop__wrapper">
    <svg class="a-spinner -text--light" 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>

Inverse

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

<div class="m-backdrop -center -inverse">
  <div class="m-backdrop__wrapper">
    <svg class="a-spinner -text--primary" 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>

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

<!-- Medium (Base) -->
<div class="m-form__item">
  <label class="a-label" for="spinner-input-01">Label</label>
  <div class="m-input__wrapper">
    <input type="text" class="a-input" placeholder="Placeholder" value="Sample text" id="spinner-input-01">
    <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>
<!-- Small -->
<div class="m-form__item">
  <label class="a-label" for="spinner-input-02">Label</label>
  <div class="m-input__wrapper">
    <input type="text" class="a-input -sm" placeholder="Placeholder" value="Sample text" id="spinner-input-02">
    <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>
<!-- Large -->
<div class="m-form__item">
  <label class="a-label" for="spinner-input-03">Label</label>
  <div class="m-input__wrapper">
    <input type="text" class="a-input -lg" placeholder="Placeholder" value="Sample text" id="spinner-input-03">
    <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>
</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

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>
<!-- -sm--2 : 20x20px -->
<svg class="a-spinner -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>
<!-- -sm--3 : 24x24px -->
<svg class="a-spinner -sm--3" 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--primary and -text--muted to change the color of any spinner.

-text--primary

-text--success

-text--warning

-text--danger

-text--muted

-text--secondary

-text--light

<!-- For light backgrounds -->
<svg class="a-spinner -text--primary" 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--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>
<!-- For dark backgrounds -->
<svg class="a-spinner -text--secondary" 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--light" viewBox="0 0 66 66">
  <title>Loading</title>
  <circle class="path" cx="33" cy="33" r="30" fill="none" stroke-width="6"></circle>
</svg>