flask - Bootstrap 3.3.7 - 在另一条路线上运行功能时在按钮中加载 gif
问题描述
我的烧瓶应用程序上有一些按钮,单击时会触发不同路线上的功能。我想在页面等待功能完成时添加加载 gif。我已经尝试了十几个来自 SO 的例子,但我没有运气。注意,我在 bootstrap 3.3.7 所以我不能使用
HTML:用于路由/仪表板(按钮位于此处)
{% block styles %}
<!-- Bootstrap latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="{{ url_for('static', filename='css/custom-base.css') }}" rel="stylesheet">
<!-- Font Awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Pretty loading buttons -->
<link href="{{ url_for('static', filename='css/loading-btn.css') }}" rel="stylesheet">
{% endblock %}
<!-- run function-->
<div class="container">
<div class="jumbotron">
<h2>Run Model</h2>
<div class="container" align="left">
<a href="/run_model" target="">
<button class="btn btn-primary ">Run</button></a>
</div>
</div>
</div>
{% block scripts %}
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{% endblock %}
Routes:按钮链接到 run_model 函数,执行并重定向到仪表板页面。
{% block content %}
@app.route('/run_model')
def run_model():
try:
# run a machine learning mode
except:
# if errors found flash some error
flash('Looks like something went wrong. Please try again! :(', 'danger')
return redirect(url_for('dashboard'))
{% endblock %}
所以本质上,当浏览器“等待127.0.0.1:5000/run_model
完成并被重定向回/dashboard
解决方案
所以这是一个 javascript 问题,而不是真正的烧瓶问题。单击链接并重定向后,所有 javascript/css 都将被终止。所以点击一个按钮后,首先显示你的加载图标,然后重定向到你想要的任何页面:
完整示例:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Center the loader */
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body style="margin:0;">
<div id="loader" style="display:none;"></div>
<div id="myDiv" style="display:block" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
<a href="/run_model" target=""><button class="btn btn-primary" onclick="testfunc()">Run</button></a>
</div>
<script>
function testfunc(){
document.getElementById("loader").style.display = "block"
document.getElementById("myDiv").style.display = "none"
setTimeout(redirect, 5)
}
function redirect(){
window.location.href = 'http://127.0.0.1:5000/';
}
</script>
</body>
</html>
推荐阅读
- c++ - 文本对象的 getLocalBounds 替代方案?(SFML)
- vb.net - 如何创建一个可以等待多个进程退出的函数?
- python - 如何在 azureml 中记录绘图?
- sql - 我的 PLSQL 触发器没有在表中循环
- php - 图片正在上传到文件夹但未显示 - php上传图片
- blockchain - Corda:管理员可以看到 Corda 网络中的交易吗?
- git - 如何在不添加分支的完整提交历史记录的情况下合并来自另一个仓库的分支?
- android - Android:当应用程序在后台时,有什么方法可以从显着运动传感器收集数据?
- c# - 有没有更简单的方法来进行这个查询?
- powershell - 在詹金斯中将密码绑定传递给PowerShell脚本时遇到问题