Spinner

A loading spinner is a small UI component that shows the system is working on something and the user should wait. It is usually an animated icon (often a rotating circle) that indicates an in-progress state.

• Used inside: Buttons, see Display Spinner on Click
• Design: Figma Component

Default Spinner

.c-spinner

<div class="c-spinner"></div>

Modifiers

Small

.c-spinner[.-small]

<div class="c-spinner -small"></div>

Large

.c-spinner[.-large]

<div class="c-spinner -large"></div>

Light Color

.c-spinner[.-light]

<div class="h-bg-color-black p-y-xl ">
  <div class="c-spinner -light"></div>
</div>

Display Spinner on Click

To display a spinner inside a button after a click, add the attribute data-spinner or the class .js-spinner to the button.

Accessibility Guidelines

• TODO: Disable the button visually (!!) and functionally to prevent double submits.
• ✅ Announce the loading state to screen readers using aria-busy="true" or a hidden live region.
• ✅ Hide decorative spinner graphics from screen readers using aria-hidden="true".

<button class="c-btn -primary" data-spinner>
  Button with Spinner
</button>

Settings and API

Show Methods

Initialize Spinner JS and adds Spinner-HTML to Target-Elements:
Spinner.init(settings: object);

Inserts Spinner HTML into a specified parent element and registers events:

• @param {Node} element - parent node of the spinner
  
• @param {boolean} [showOnFocus=false] - if true: display spinner as long as element is focused
  
• @param {number} [showMaxTime=4000] - number of milliseconds the spinner should be displayed
  Spinner.addToElement(element: Node, showOnFocus: Boolean, showMaxTime: number);
  
  

Registers a Click-Event on the parent element:
Spinner.registerEvents(element: Node, showOnFocus: Boolean, showMaxTime: number);

Removes the Click-Event Listener from the parent element:
Spinner.removeEventListener(element: Node);

Displays the Spinner - either for a defined time-frame in ms (or 4000ms if undefined) OR as long as element is focused (default = false):
Spinner.displaySpinner(element: Node);

Hides the Spinner:
Spinner.hideSpinner(element: Node);

Checks if Spinner element already exists within a parent element:
Spinner.hasSpinner(element: Node);

Show Settings

const defaults = {
  settings: {
    showOnFocus: false,
    showMaxTime: 4000
  },
  selector: {
    spinnerWrapper: "[data-spinner], .js-spinner",
    spinner:        ".c-spinner"
  },
  class: {
    spinner:  "c-spinner",
    isHidden: "-is-hidden",
    eventTarget: "c-btn"
  }
};