Loading 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>

Display Spinner on Click

.c-btn[data-spinner]

<button class="c-btn -primary" data-spinner>
  Some Button Text
</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"
  }
};

Examples

TIP

Task: Add a spinner to a button and show spinner as long as the button is focused.

sample-spinner-add-to-element.html

<button class="c-btn -secondary h-inline-block m-r-m" id="example-button">
  Focus on me (example button)
</button>
<button class="c-btn -secondary h-inline-block m-r-m">
  Or me (ordinary button)
</button>

javascript

import { Spinner}  from './Spinner';

Spinner.init();

const button = document.getElementById('example-button');
Spinner.addToElement(button, true, 0);