Spinner

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

Examples

Backdrop

Base

Web Component
HTML Blueprint

To render a spinner, use the tag <chi-spinner>.
An optional backdrop can be added to focus the user's attention on a spinner. To set a backdrop, use the backdrop attribute.

<chi-spinner color="light" backdrop></chi-spinner>

To render a spinner, use the class chi-spinner.
Wrap spinners in chi-backdrop to overlay content similar to a modal, and add -center class to position it in the middle of the page.

<div class="chi-backdrop -center">
  <div class="chi-backdrop__wrapper">
    <svg class="chi-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>

Set the backdrop value to inverse to render spinners on light backgrounds.

<chi-spinner color="primary" backdrop="inverse"></chi-spinner>

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

<div class="chi-backdrop -center -inverse">
  <div class="chi-backdrop__wrapper">
    <svg class="chi-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

Small

Large

Web Component
HTML Blueprint

<chi-button>
  <span>Button</span>
  <chi-spinner color="muted"></chi-spinner>
</chi-button>
<chi-button size="sm">
  <span>Small</span>
  <chi-spinner color="muted" size="xs"></chi-spinner>
</chi-button>
<chi-button size="lg">
  <span>Large</span>
  <chi-spinner color="muted" size="sm--2"></chi-spinner>
</chi-button>

<button class="chi-button">
  <div class="chi-button__content">
    <span>Button</span>
    <svg class="chi-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="chi-button">
  <div class="chi-button__content">
    <span>Small</span>
    <svg class="chi-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="chi-button">
  <div class="chi-button__content">
    <span>Large</span>
    <svg class="chi-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

Label

Web Component
HTML Blueprint

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

sm--2

sm--3

xxl

Web Component
HTML Blueprint

By default, spinners are rendered at 16x16px (sm). Set size attribute to render spinners larger or smaller: xs, sm, sm--2, sm--3, md, lg, xl, xxl.

<!-- xs : 12x12px -->
<chi-spinner size="xs"></chi-spinner>
<!-- sm : 16x16px -->
<chi-spinner size="sm"></chi-spinner>
<!-- sm--2 : 20x20px -->
<chi-spinner size="sm--2"></chi-spinner>
<!-- sm--3 : 24x24px -->
<chi-spinner size="sm--3"></chi-spinner>
<!-- md : 32x32px -->
<chi-spinner size="md"></chi-spinner>
<!-- lg : 64x64px -->
<chi-spinner size="lg"></chi-spinner>
<!-- xl : 96x96px -->
<chi-spinner size="xl"></chi-spinner>
<!-- xxl : 128x128px -->
<chi-spinner size="xxl"></chi-spinner>

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="chi-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="chi-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="chi-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="chi-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="chi-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="chi-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="chi-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="chi-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

primary

success

warning

danger

muted

secondary

light

Web Component
HTML Blueprint

To change the color of a spinner set the value to color attribute.

<!-- For light backgrounds -->
<chi-spinner color="primary"></chi-spinner>
<chi-spinner color="success"></chi-spinner>
<chi-spinner color="warning"></chi-spinner>
<chi-spinner color="danger"></chi-spinner>
<chi-spinner color="muted"></chi-spinner>
<!-- For dark backgrounds -->
<chi-spinner color="secondary"></chi-spinner>
<chi-spinner color="light"></chi-spinner>

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

<!-- For light backgrounds -->
<svg class="chi-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="chi-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="chi-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="chi-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="chi-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="chi-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="chi-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>

Web Component

Properties

Property	Attribute	Description	Type	Default
`backdrop`	`backdrop`	to render spinners on dark or light backgrounds.	`string`	undefined
`color`	`color`	to set color of a spinner { primary, success, warning, danger, muted }.	`string`	undefined
`size`	`size`	to set size of a spinner { xs, sm, sm--2, sm--3, md, lg, xl, xxl }.	`string`	`'sm'`

Accessibility

Accessibility guidelines coming soon