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 is not jQuery dependent.

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 REST API.

This sample mimics the scenario of retrieving large amounts of data, by setting a setTimeout() (External link) method. While the method is processing, the spinner is displayed.

Prepare the App

Create the Form

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

Set the Libraries

This sample uses spin.js (External link) v2.3.2 and jQuery (External link) v 3.6.0. Set the following URLs into the App's JavaScript and CSS Customization settings (External link) .

  • https://js.kintone.com/spinjs/2.3.2/spin.min.js
  • https://js.kintone.com/jquery/3.6.0/jquery.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

(function() {
  'use strict';

  // Function to display the spinner
  function showSpinner() {
    // Initialize
    if ($('.kintone-spinner').length === 0) {
      // Create elements for the spinner and the background of the spinner
      const spin_div = $('<div id ="kintone-spin" class="kintone-spinner"></div>');
      const spin_bg_div = $('<div id ="kintone-spin-bg" class="kintone-spinner"></div>');

      // Append spinner to the body
      $(document.body).append(spin_div, spin_bg_div);

      // Set a style for the spinner
      $(spin_div).css({
        'position': 'fixed',
        'top': '50%',
        'left': '50%',
        'z-index': '510',
        'background-color': '#fff',
        'padding': '26px',
        '-moz-border-radius': '4px',
        '-webkit-border-radius': '4px',
        'border-radius': '4px'
      });
      $(spin_bg_div).css({
        'position': 'fixed',
        'top': '0px',
        'left': '0px',
        'z-index': '500',
        'width': '100%',
        'height': '200%',
        'background-color': '#000',
        'opacity': '0.5',
        'filter': 'alpha(opacity=50)',
        '-ms-filter': 'alpha(opacity=50)'
      });

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

      // Create the spinner
      new Spinner(opts).spin(document.getElementById('kintone-spin'));
    }

    // Display the spinner
    $('.kintone-spinner').show();
  }

  // Function to hide the spinner
  function hideSpinner() {
    // Hide the spinner
    $('.kintone-spinner').hide();
  }

  // Record List Event
  kintone.events.on('app.record.index.show', (event) => {
    // Prevent duplication of the button
    if (document.getElementById('my_index_button') !== null) {
      return;
    }
    // Set a button
    const myIndexButton = document.createElement('button');
    myIndexButton.id = 'my_index_button';
    myIndexButton.innerHTML = 'Click Me!';

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

    // Retrieve the header menu space element and set the button there
    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() process. During this process, an animated spinner should display in the center of the window.

Reference