要自定義 Flask 中 Spinner 的樣式和行為，你需要修改前端代碼，通常是 HTML、CSS 和 JavaScript
spinner.html。將以下代碼添加到該文件中：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Spinner</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/spinner.css') }}">
</head>
<body>
<div class="spinner"></div>
<script src="{{ url_for('static', filename='js/spinner.js') }}"></script>
</body>
</html>
css 的新文件夾。在此文件夾中，創建一個名為 spinner.css 的新文件。將以下代碼添加到該文件中以自定義 Spinner 的樣式：.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
js 的新文件夾。在此文件夾中，創建一個名為 spinner.js 的新文件。你可以在這里編寫 JavaScript 代碼以自定義 Spinner 的行為。例如，你可以使用以下代碼使 Spinner 在頁面加載完成后消失：window.addEventListener("load", function() {
const spinner = document.querySelector(".spinner");
spinner.style.display = "none";
});
spinner.html 模板。例如，在你的 app.py 文件中，你可以添加以下路由：from flask import Flask, render_template
app = Flask(__name__)
@app.route("/spinner")
def spinner():
return render_template("spinner.html")
if __name__ == "__main__":
app.run(debug=True)
現在，當你訪問 /spinner 路由時，你應該看到一個自定義樣式和行為的 Spinner。你可以根據需要修改 CSS 和 JavaScript 代碼以實現所需的效果。
