Как изменить сообщение по умолчанию "Загрузка ...", когда страница компонента Dash находится в состоянии загрузки?

#plotly-dash #plotly-python

Вопрос:

Я попробовал DCC Loading component , а также попробовал CSS способ отключения «Загрузки по умолчанию».. » текст на экране, когда компонент находится в состоянии загрузки. Он вообще не работает. Пожалуйста, предложите мне способ изменить сообщение о загрузке по умолчанию на загрузчик с CSS помощью in Plotly's Dash .

Это 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;
}

1. Можете ли вы поделиться имеющимся у вас кодом, который использовал компонент загрузки?

2. Пожалуйста, проверьте загруженный мной код. Один — это py файл, а другой CSS — таблица стилей.

3. Что произойдет, если вы измените второе visibility: visible; на hidden вместо этого?

4. Согласно документам, они указали, что это приведет к подавлению loading... текста

5. Похоже, открытая проблема: github.com/plotly/dash/issues/736

Ответ №1:

Добавив приведенный ниже файл CSS в /assets/style.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;
}