from flask import Flask, render_template, Response, request, redirect, url_for app = Flask(__name__) app.config['TEMPLATES_AUTO_RELOAD'] = True @app.route("/", methods=["POST", "GET"]) def index(): if request.method == "POST": return render_template("index.html") if __name__ == '__main__': app.run(debug=True) <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> div#loading { width: 50px; height: 50px; display: none; background: url('https://i.giphy.com/3oEjI6SIIHBdRxXI40.gif') center no-repeat; cursor: wait; padding-left:100%; } </style> </head> <body> <form method="POST"> <input type="text"> <button type="submit" onclick="loading();"> <div id="loading"></div> <div id="content"> <i class="fas fa-search"></i> </div> </button> </form> <script type="text/javascript"> function loading(){ $("#loading").show(); $("#content").hide(); } </script> </body> </html>Estoy creando una aplicación Flask, donde cuando presionas un botón, un cargador debe reemplazar el ícono de cristal de búsqueda con un gif de carga.
Por el momento, el gif no aparece al hacer clic en el botón.
Cuando elimino display:none del estilo de carga, aparece el gif, así que sé que está ahí.
Está utilizando JQuery para mostrar y ocultar los elementos, pero no lo ha incluido en la plantilla.
Así que incluye una etiqueta de script como
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>antes de la etiqueta del script donde hace referencia a JQuery
Supuse que ya tenía un div id = content , por lo que estaba eliminando todo el div. ¡Recuerda revisar tus identificaciones!