Spinner在Flask中的动态加载效果如何实现

avatar
作者
筋斗云
阅读量:0

要在 Flask 中实现 Spinner 的动态加载效果,你可以使用 JavaScript 和 AJAX 技术。这里是一个简单的示例,展示了如何在 Flask 应用中实现 Spinner 的动态加载效果:

  1. 首先,创建一个简单的 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) 
  1. 创建一个名为 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 将隐藏,并显示加载的数据。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!