Question

在我基于Dash的应用程序中，一个按钮触发了长时间运行的计算。在结果还没有显示时显示加载动画，并使按钮处于非活动状态，以便在计算完成之前不会再次单击该按钮，这不是很好吗？

我正在使用Bulma进行UI设计，并希望为此目的使用TransformBounds(Rect) CSS类。

我的第一个想法是有两个回调：一个是通过单击按钮将按钮设置为button is-loading触发的，另一个是通过更改输出将其设置为正常状态而触发的。

is-loading

显然，这种方式行不通：

@app.callback(
    Output('enter-button', 'className'),
    [
        Input('graph', 'figure')
    ],
)
def set_trend_enter_button_loading(figure_changed):
    return "button is-large is-primary is-outlined"


@app.callback(
    Output('enter-button', 'className'),
    [
        Input('enter-button', 'n_clicks')
    ],
)
def set_trend_enter_button_loading(n_clicks):
    return "button is-large is-primary is-outlined is-loading"

有什么想法可以使这项工作成功吗？

Answer 1

上周我遇到了同样的问题，甚至尝试使用Javascript实现禁用的按钮行为，但最终放弃了。我已经看到在plotly forums上对此进行了讨论，显然需要这种功能，但是我认为在当前版本中不容易实现。

虽然可能发生，但Dash开发人员将其作为临时解决方案提到的一件事是添加了全局加载屏幕。简而言之，您需要在样式表中添加以下CSS：

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

._dash-loading-callback {
  font-family: sans-serif;
  padding-top: 50px;
  color: rgb(90, 90, 90);

  /* The banner */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: progress;

  opacity: 0;
  background-color: rgb(250, 250, 250);
  /* Delay animation by 1s to prevent flashing 
     and smoothly transition the animation over 0.5s 
   */
  -moz-animation: fadein 0.5s ease-in 1s forwards; /* Firefox */
  -webkit-animation: fadein 0.5s ease-in 1s forwards; /* Safari and Chrome */
  -o-animation: fadein 0.5s ease-in 1s forwards; /* Opera */
    animation: fadein 0.5s ease-in 1s forwards;
}

一些说明：

_dash-loading-callback选择器选择一个div，该div每次进行回调时都添加在body元素的末尾，并在完成时将其删除。
您可以通过为_dash-loading-callback定义背景GIF来添加加载动画。
以上CSS中定义的动画旨在防止加载的屏幕在短暂的回调时闪烁。它设置为在一秒后淡入，因此仅在长时间的加载操作中才会显示。您当然可以使用这些设置。

Answer 2

由于dash-renderer == 0.9.0，因此当您的应用程序等待回调时，会将div标签添加到布局中。您可以按照Chris的建议在其中放一个不同的CSS：https://community.plot.ly/t/mega-dash-loading-states/5687

此外，一个新功能即将推出，它可以满足您的需求。当前是Alpha版：https://community.plot.ly/t/loading-states-api-and-a-loading-component-prerelease/16406

在等待带有plot.ly Dash的结果时显示加载符号

2 个答案: