IxDF Design System

“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.