要在 Flask 中实现 Spinner 的动态加载效果,你可以使用 JavaScript 和 AJAX 技术。这里是一个简单的示例,展示了如何在 Flask 应用中实现 Spinner 的动态加载效果:
from flask import Flask, render_template, jsonify
import time
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/load_data')
def load_data():
# 模拟数据加载过程
time.sleep(3)
data = "数据已加载完成!"
return jsonify({'data': data})
if __name__ == '__main__':
app.run(debug=True)
templates
的文件夹,并在其中创建一个名为 index.html
的文件,内容如下:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spinner 动态加载示例</title>
<style>
.spinner {
display: none;
margin: 20px auto;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1>Spinner 动态加载示例</h1>
<div class="spinner"></div>
<button id="loadDataBtn">加载数据</button>
<div id="dataContainer"></div>
<script>
document.getElementById("loadDataBtn").addEventListener("click", function() {
// 显示 Spinner
document.querySelector(".spinner").style.display = "block";
// 发送 AJAX 请求加载数据
fetch("/load_data")
.then(response => response.json())
.then(data => {
// 隐藏 Spinner
document.querySelector(".spinner").style.display = "none";
// 显示加载的数据
document.getElementById("dataContainer").innerHTML = data.data;
})
.catch(error => {
console.error("Error:", error);
});
});
</script>
</body>
</html>
在这个示例中,我们创建了一个简单的 Flask 应用,包含一个名为 load_data
的路由,用于模拟数据加载过程。在 index.html
文件中,我们使用 CSS 创建了一个简单的 Spinner,并使用 JavaScript 和 AJAX 技术实现了动态加载效果。当用户点击 “加载数据” 按钮时,Spinner 将显示,并发送 AJAX 请求加载数据。数据加载完成后,Spinner 将隐藏,并显示加载的数据。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
相关推荐:Bootstrap spinner的动画效果如何实现