PatternLab (0.1.259)

# Loading Spinner

.c-spinner

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

# Modifiers

.c-spinner[.-small]

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

.c-spinner[.-large]

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

# Display Spinner on Click

.c-btn[data-spinner]

hide code 
<button class="c-btn -primary" data-spinner>
    Some Button Text
</button>

# Settings and API

Default 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"
        }
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

TIP

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);

# Examples

TIP

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

hide code 
<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>

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

← Video →