Dash㊲（Loadingコンポーネント）

Loadingコンポーネント

Loadingコンポーネントを使用すると、children引数に格納したコンポーネントのロード中にローディング画面を表示することができます。

Loadingクラスの引数は下記の通りです。

オプション データ型 内容
color 文字列 ローディングの色を設定
fullscreen ブール型 ローディングを全画面表示
type 文字列 ローディングの種類を設定
“default”, “graph”, “cube”, “circle”, “dot”

今回は、リストからローディングの種類を選択し、ボタンを押すとLoading画面を５秒間表示します。

[ソースコード]

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
import time
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)       # Dashインスタンスを生成

app.layout = html.Div(
    [
        html.H3('Loading Test'),

        dcc.Dropdown(id='dropdown1',
            options=[
                {'label':'default', 'value':'default'},
                {'label':'graph', 'value':'graph'},
                {'label':'cube', 'value':'cube'},
                {'label':'circle', 'value':'circle'},
                {'label':'dot', 'value':'dot'}
            ]
        ),
        html.Button(id='button1', children="Push"),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        dcc.Loading(
            id='loading1',
            children=[html.H1(id='loading', style={'margin':100})]
        )
    ],
    style={'textAlign':'center'}
)

# コールバック１
@app.callback(
    Output('loading1', 'type'),
    Input('dropdown1', 'value')
)
def set_loading_type(dropdown1):
    print('set_loading_type', dropdown1)
    return dropdown1

# コールバック２
@app.callback(
    Input('button1', 'n_clicks')
)
def start_loading(n_clicks):
    print('start_loading', n_clicks)
    time.sleep(5)
    return

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

１つめのコールバックでは、リストから選択されたローディングの種類をLoadingコンポーネントに設定しています。

２つめのコールバックでは、Loadingコンポーネントを５秒間表示しています。（今回はOutputにはなにも設定していません。）

[ブラウザで表示]

リストから各ローディングの種類を選択しボタンを押すと、いろいろな種類のLoading画面が表示されることを確認できます。