Dash组件页面加载状态时，如何更改默认的"Loading... "消息？

Question

我尝试了 DCC Loading component 并且还尝试了 CSS 方法来禁用组件处于加载状态时屏幕上的默认“Loading..”文本。它根本不起作用。请建议我一种将默认加载消息更改为 Plotly's Dash.

中带有 CSS 的加载程序的方法

这是将作为登录页面加载的 dashapp.py 文件：

from dash import Dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html 
from dash.dependencies import Input, Output, State
from config import appserver
import time

external_stylesheets = [dbc.themes.YETI,'./frontend/static/stylesheet.css']

dashapp = Dash(__name__, server = appserver,external_stylesheets=external_stylesheets,\
url_base_pathname='/application/', title='Home Page', assets_url_path='assets')

dashapp.css.config.serve_locally = True

dashapp.layout = html.Div([
    html.H1('Hi Welcome to Dash-Flask integration app!'),
], id="child-process")

if __name__=='__main__':
    dashapp.run_server(debug=True)

CSS 样式表存在于目录中：./frontend/static/。
我使用 CSS 样式表来覆盖默认加载行为，如下所示：

*[data-dash-is-loading="true"]{
  visibility: hidden;
}
*[data-dash-is-loading="true"]::before{
  content: "Loading...";
  display: inline-block;
  color: magenta;
  visibility: visible;
}

Answer 1

如果我理解你的问题，那么我认为 this 就是你需要的页面。只需将 dcc.Loading 组件包裹在任何你想要加载图标的地方。

Answer 2

通过在 /assets/style.css 目录下添加以下 CSS 文件，我的问题得到解决。

/* assets/style.css */
._dash-loading {
  margin: auto;
  color: transparent;
  width: 0;
  height: 0;
  text-align: center;
}

._dash-loading::after {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 2rem;
  color: black;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner-border 0.75s linear infinite;
  animation: spinner-border 0.75s linear infinite;
  margin-top: 2rem;
}

Dash组件页面加载状态时，如何更改默认的"Loading... "消息？

How to change the default "Loading... " message when the Dash component page is in loading state?

plotly-dash

plotly-python