Display an Animated Loading Spinner

Contents

Overview

This article introduces how to display a loading spinner on Kintone Apps using spin.js (External link) .

What is spin.js

spin.js (External link) is a library that displays a spinner, commonly used as a loading icon. This library does not require any CSS libraries and does not depend on jQuery.

Use-case for Spinners

In a common Kintone use-case, the spinner can be displayed when a large volume of data is being processed with the REST API.

This sample mimics retrieving large amounts of data by using setTimeout() (External link) . While the timer runs, the spinner is displayed.

Prepare the App

Create the Form

Create an App (External link) that includes fields of any type. Save the form when finished.

Set the Libraries

This sample uses spin.js (External link) v2.3.2. Add the following URL in the App's JavaScript and CSS Customization settings (External link) .

  • https://js.kintone.com/spinjs/2.3.2/spin.min.js

Sample Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

(() => {
  'use strict';

  // Function to display the spinner
  const showSpinner = () => {
    // Initialize
    if (document.querySelectorAll('.kintone-spinner').length === 0) {
      // Create elements for the spinner and the background of the spinner
      const spinDiv = document.createElement('div');
      spinDiv.id = 'kintone-spin';
      spinDiv.classList.add('kintone-spinner');
      const spinBgDiv = document.createElement('div');
      spinBgDiv.id = 'kintone-spin-bg';
      spinBgDiv.classList.add('kintone-spinner');

      // Append spinner to the body
      document.body.appendChild(spinDiv);
      document.body.appendChild(spinBgDiv);

      // Set a style for the spinner
      spinDiv.style.cssText =
        'position: fixed; top: 50%; left: 50%; z-index: 510; background-color: #fff; padding: 26px; border-radius: 4px;';
      spinBgDiv.style.cssText =
        'position: fixed; top: 0px; left: 0px; z-index: 500; width: 100%; height: 100%; background-color: #000; opacity: 0.5;';

      // Set options for the spinner
      const opts = {color: '#000'};

      // Create the spinner
      new Spinner(opts).spin(spinDiv);
    }

    document.querySelectorAll('.kintone-spinner').forEach(element => {
      element.style.display = 'block';
    });
  };

  // Function to hide the spinner
  const hideSpinner = () => {
    document.querySelectorAll('.kintone-spinner').forEach((element) => {
      element.style.display = 'none';
    });
  };

  // Record List Event
  kintone.events.on('app.record.index.show', () => {
    if (document.getElementById('my_index_button') !== null) {
      return;
    }

    // Set a button
    const myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.textContent = 'Click Me!';

    // Button onclick function
    myIndexButton.onclick = () => {
      showSpinner();
      setTimeout(() => {
        hideSpinner();
      }, 3000);
    };

    kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
  });
})();

Test the Code

Navigate to the Record List page. A button should be displayed above the list of records. Click the button to start the setTimeout() timer. While the timer runs, an animated spinner should appear in the center of the window.

Reference