[Python] 대시의 콜백에 애니메이션을 넣습니다.

Dash Loading Component

배경.

Dash의 시각 형상 응용 프로그램 드로잉에 loading 애니메이션을 추가하고 싶습니다.
참고로 기본적으로 다음과 같은 변화가 없기 때문에 input이 검출되면 전달하기 어렵다.

컨디션

macOSX Mojave version 10.14,3

Python 3.6.1

실행 환경은 local

규격.

Dropdown의 input을 받은 후 2초만 기다리고component

를 그립니다.

2초 이내 애니메이션

메서드

사용Loading Component에서 소개한 dash_core_components.Loading().
애니메이션 후에 표시하고 싶은component를 dcc.Loading()의children로 줍니다.
app.py

import dash
import dash_html_components as html
import dash_core_components as dcc
import time

from dash.dependencies import Input, Output

app = dash.Dash(__name__)
common_style = {'position': 'relative', 'width': '100%',
                'font-family': 'Dosis', 'text-align': 'center'}

app.layout = html.Div(
    children=[
        html.H1("Dash app with loading state", style={'margin-bottom': '10%'}),
        dcc.Dropdown(
            id='my-dropdown',
            options=[
                {'label': 'Cactus',
                 'value': 'https://image.flaticon.com/icons/svg/874/874979.svg'},
                {'label': 'Clownfish',
                 'value': 'https://image.flaticon.com/icons/svg/875/875011.svg'},
                {'label': 'Crab',
                    'value': 'https://image.flaticon.com/icons/svg/875/875010.svg'}
            ],
            value='https://image.flaticon.com/icons/svg/874/874979.svg'
        ),
        dcc.Loading(id="loading-1",
                    children=[
                        html.Div(id='output-container',
                                 )
                    ],
                    style={"margin": "10%"},
                    type="default"),
    ],
    style=common_style
)


@app.callback(
    Output('output-container', 'children'),
    [Input('my-dropdown', 'value')])
def input_triggers_spinner(value):
    time.sleep(2)
    return html.Img(src=value, height="30%", width="30%", style={"margin": "10%"})


if __name__ == "__main__":
    app.run_server(debug=False)