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

Spinners in Text Inputs

Label

Web Component
HTML Blueprint

Use the spinner attribute to render a spinner inside a text input. This lets users know when information is saving or loading.

<!-- Medium (Base) -->
<div class="chi-form__item">
  <chi-label for="spinner-input-01">Label</chi-label>
  <chi-text-input spinner></chi-text-input>
</div>
<!-- Small -->
<div class="chi-form__item">
  <chi-label for="spinner-input-02">Label</chi-label>
  <chi-text-input spinner size="sm"></chi-text-input>
</div>
<!-- Large -->
<div class="chi-form__item">
  <chi-label for="spinner-input-03">Label</chi-label>
  <chi-text-input spinner size="lg"></chi-text-input>
</div>

<!-- 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 -icon--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 -icon--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 -icon--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>

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>

Colors

By default, spinners are rendered in the same color as the text color defined on their parent container. Easily change a spinners color using the examples below.

Brand

Brand spinner colors reinforce Lumen's brand. Use primary or dark for light themes and secondary or light for dark themes.

Web Component
HTML Blueprint

Use the color attribute to change a spinners color.

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

Use icon color utilities such as -icon--primary and -icon--secondary to change the color of any spinner.

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

Semantic

Use semantic colors to communicate meaning to users. Use green (success) for positive, red (danger) for negative, yellow (warning) for needs attention, and grey (muted) for neutral. Semantic colors should never be used for decorative purposes.

Web Component
HTML Blueprint

Use the color attribute to change a spinners color.

<chi-spinner color="success"></chi-spinner>
<chi-spinner color="warning"></chi-spinner>
<chi-spinner color="danger"></chi-spinner>
<chi-spinner color="muted"></chi-spinner>

Use icon color utilities such as -icon--success and -icon--danger to change the color of any spinner.

<svg class="chi-spinner -icon--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 -icon--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 -icon--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 -icon--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>

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, dark, 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