当达世币组件页面处于加载状态时，如何更改默认"Loading... "消息？

Question

我尝试了DCC Loading component，也尝试了CSS禁用默认"；正在加载"组件处于加载状态时屏幕上的文本。它根本不起作用。请建议我一种方法，将默认加载消息更改为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

通过在/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;
}