plotly-dash - 如何在 Dash 组件页面处于加载状态时更改默认的“Loading...”消息?
问题描述
我尝试了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;
}
解决方案
通过在目录下添加以下 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;
}
推荐阅读
- css - CSS 类名和浏览器缓存
- ant - JMeter 报告中的 Ant 未识别错误
- c++ - 循环增加ascii值
- java - 带有二进制响应的 Spring Boot 2 测试
- python - Python Flask AWS S3 欧盟中心 | Bad Request 不支持您提供的授权机制。请使用 AWS4-HMAC-SHA256
- vb.net - VB.NET 从文件中读取 2 个复选框状态
- vb.net - Office 应用程序在通过互操作打开文档期间挂起
- ios - 未找到适用于企业应用程序的应用程序的有效 aps-environment 权利字符串
- android - alertdialog 编辑文本验证
- ffmpeg - 将 udp 多播保存到文件时,ffmpeg 获取无效的 UE golomb 代码