“Spinner” Component

Spinners are used to provide feedback on system status, usually when the system is processing and cannot allow user interaction. Most used when the platform is processing AJAX requests or page navigation.

Element Spinner

Element spinner is added to a specific html element.

Usage

import {Spinner} from 'modules/spinner.js';
const element = document.querySelector('#element-spinner-area');

// Activate the spinner on the element
const spinner = new Spinner(element);
spinner.start();

// Or use a spinner with message
spinner.start("loading…")

// Deactivate element-level spinner
spinner.stop();

Spinner Options

• start
  function

  Starts spinner, can pass optional message parameter.

• stop
  function

  Stops spinner.

• addClass
  function

  Add CSS class to spinner container.

Page Spinner

Page spinner blocks the whole page and is not associated with a specific element.

Usage

import {PageSpinner} from 'modules/spinner.js';
// Activate spinner
PageSpinner.start();

// Deactivate spinner
PageSpinner.stop();

Page Spinner Options

• start
  function

  Starts spinner, can pass optional message parameter.

• stop
  function

  Stops spinner.