117笔记问答要自定义 Flask 中 Spinner 的样式和行为，你需要修改前端代码，通常是 HTML、CSS 和 JavaScript
- 首先，在你的 Flask 项目的 templates 文件夹中创建一个新的 HTML 文件，例如
spinner.html。将以下代码添加到该文件中：
Custom Spinner
- 接下来，在你的 Flask 项目的 static 文件夹中创建一个名为
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);
}
}
- 现在，在 static 文件夹中创建一个名为
js的新文件夹。在此文件夹中，创建一个名为spinner.js的新文件。你可以在这里编写 JavaScript 代码以自定义 Spinner 的行为。例如，你可以使用以下代码使 Spinner 在页面加载完成后消失：
window.addEventListener("load", function() {
const spinner = document.querySelector(".spinner");
spinner.style.display = "none";
});
- 最后，确保在你的 Flask 应用中渲染
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 代码以实现所需的效果。