我想将我的 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"),
)
有人可以指导我吗?
最佳答案
type
属性指定微调器的外观,但仅限于 dash 核心组件提供的一组值:
type (a value equal to: 'graph', 'cube', 'circle', 'dot', 'default'; default 'default'): Property that determines which spinner to show one of 'graph', 'cube', 'circle', 'dot', or 'default'.
因此您的方法目前不可行,但有一个解决方法。
默认微调器的 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 .
关于python - 如何使用 Dash plotly 添加/创建自定义加载程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68188107/