如何使用 Dash plotly 添加/创建自定义加载器？答案

【问题标题】：How to add/create a custom loader with Dash plotly?如何使用 Dash plotly 添加/创建自定义加载器？
【发布时间】：2021-07-01 15:25:53
【问题描述】：

我想将我的 gif 传递给加载器组件，而不是使用默认数字。有人知道怎么做吗？

这是我的代码：

dcc.Loading(
    id="loading-1",
    type="default",
    children=html.Div(id="loading-output-1"),
)

我正在尝试完成这样的事情：

dcc.Loading(
    id="loading-1",
    type="assets/dashboard_loader.gif",
    children=html.Div(id="loading-output-1"),
)

有人可以指导我吗？

【问题讨论】：

标签： python flask plotly plotly-dash plotly-python

【解决方案1】：

type 属性指定微调器的外观，但仅限于 dash 核心组件提供的一组值：

type（一个值等于：'graph'，'cube'，'circle'，'dot'，'default'；默认'default'）：确定哪个微调器显示'graph'，'之一的属性立方体”、“圆”、“点”或“默认”。

所以你的方法目前是不可能的，但有一个解决方法。

默认微调器的 html 结构如下所示：

<div class="dash-spinner dash-default-spinner">
  <div class="dash-default-spinner-rect1"></div>
  <div class="dash-default-spinner-rect2"></div>
  <div class="dash-default-spinner-rect3"></div>
  <div class="dash-default-spinner-rect4"></div>
  <div class="dash-default-spinner-rect5"></div>
</div>

.dash-spinner 中的每个矩形 div 都用于默认类型动画。我们不关心这些矩形或.dash-spinner 内部的任何东西，因为我们只想要 gif 动画。

所以我们可以在这里做的是隐藏所有.dash-spinner 子元素并为.dash-spinner 添加动画背景。

我们可以用 css 做到这一点

.dash-spinner {
  background-image: url("http://i.stack.imgur.com/SBv4T.gif");
  background-size: contain;
  background-repeat: no-repeat;
}

.dash-spinner * {
  display: none !important;
}

如需包含 css，请参阅文档 here。

基于文档here中给出的示例的最小且可重复的示例：

from dash import Dash
import time
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output


app = Dash(__name__)
app.layout = html.Div(
    children=[
        html.H3("Edit text input to see loading state"),
        dcc.Input(id="loading-input-1", value="Input triggers local spinner"),
        dcc.Loading(
            id="loading-1", type="default", children=html.Div(id="loading-output-1")
        ),
    ],
)


@app.callback(
    Output("loading-output-1", "children"),
    Input("loading-input-1", "value"),
    prevent_initial_call=True,
)
def input_triggers_spinner(value):
    time.sleep(2)
    return value


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

Gif 取自此相关答案here。

【讨论】：