阅读量:0
要在 Flask 中实现 Spinner 的动态加载效果,你可以使用 JavaScript 和 AJAX 技术。这里是一个简单的示例,展示了如何在 Flask 应用中实现 Spinner 的动态加载效果:
- 首先,创建一个简单的 Flask 应用:
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 将隐藏,并显示加载的数据。