一覧画面でのインジケーター表示

kintone カスタマイズ
1

一覧画面で下記を使い
http://neteye.github.io/activity-indicator.html#usage
インジケーターを表示させようとしています。
実装は出来たのですが、インジケーターが一覧表の裏に表示されてしまいます。
画面の中央で一番手前に表示させたいのですが、何か方法はございますでしょうか。
よろしくお願いいたします。

現在以下のように記述しております。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
kintone.events.on(‘app.record.index.show’, function(event) {

createButton('create_process_table', 'プロセステーブル作成', function () {
        $('html').activity({segments: 8, steps: 3, opacity: 0.3, width: 4, space: 0, length: 5, color: '#0b0b0b', speed: 1.5 , valign: 'top'});
2

田中さん こんにちは。

オブジェクトのz-indexプロパティを上げれば手前に表示されます。

ちなみにローディングでしたら、CybozuCDNに用意されているものがありました。
https://cybozudev.zendesk.com/hc/ja/articles/202960194
>Spin.js

3

カキ氷さん

早速のご回答ありがとうございます！

Spin.jsを用いて記述してみたのですが。
下記の書き方であっていますでしょうか…？
よろしくお願いいたします。

kintone.events.on(‘app.record.index.show’, function(event) {

createButton('create_process_table', 'プロセステーブル作成', function () {
        var opts = {
            lines: 12, // 回転する線の本数
            length: 7, // 線の長さ
            width: 4, // 線の太さ
            radius: 10, // 線の丸み
            color: ' #000', // 線の色 #rgb or #rrggbb
            speed: 1, // 1回転に要する時間 秒
            trail: 60, // Afterglow percentage
            shadow: false, // 線に影を付ける場合、true
            hwaccel: false // Whether to use hardware acceleration
        };
        // アニメーションを挿入する要素
        var target = $('.html');
        // 実行
        var spinner = new Spinner(opts).spin(target);
4

田中さん

書き方問題ないと思います！
私もちょっと試してみました。ちなみにこんな設定です

var LOAD_IMG_OPT = {
lines: 10, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0…1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: ‘#000’, // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: ‘spinner’, // The CSS class to assign to the spinner
top: ‘auto’, // Top position relative to parent in px
};

var LORDING_SPINNER = new Spinner(LOAD_IMG_OPT).spin($(‘#spinimg’)[0]);

5

カキ氷さん
ありがとうございます！実装することが出来ました！！
またご質問させていただくことがあるかと思いますが、よろしくお願いいたします。