Solución:
Agregue esto a su archivo index.html o js (supongo que tiene jQuery aquí, podría usar javascript estándar, por supuesto):
<script type="text/javascript">// <![CDATA[
function loading(){
$("#loading").show();
$("#content").hide();
}
// ]]></script>
Agregue esto a su archivo html o css:
div#loading {
width: 35px;
height: 35px;
display: none;
background: url(/static/loadingimage.gif) no-repeat;
cursor: wait;
}
Puede obtener un GIF adecuado en http://www.ajaxload.info/. Descárguelo y colóquelo en su carpeta estática.
Luego cambie su botón de envío para llamar a la función js anterior:
<input type="submit" name="anything_submit" value="Submit" onclick="loading();">
y agregue una carga y un div de contenido a su archivo html base:
<body>
<div id="loading"></div>
<div id="content">
<h3>Type anything:</h3>
<p>
<form action="." method="POST">
<input type="text" name="anything" placeholder="Type anything here">
<input type="submit" name="anything_submit" value="Submit" onclick="loading();">
</form>
</p>
</div>
</body>
Ahora, cuando haga clic en ‘Enviar’, la función js debería ocultar su contenido y mostrar un GIF de carga. Esto se mostrará hasta que se procesen sus datos y el matraz cargue la nueva página.
Esto se puede hacer usando un div que contiene una imagen de “cargando gif”. Cuando se hace clic en el botón enviar, el div se muestra usando javascript. Para implementar esto, puede echar un vistazo a este sitio web: http://web.archive.org/web/20181023063601/http://www.netavatar.co.in/2011/05/31/how-to-show -una-carga-gif-imagen-mientras-se-carga-una-página-usando-javascript-y-css /
Encontré el cargador puramente dependiente de CSS muy útil. No depende de recursos externos:
https://www.w3schools.com/howto/howto_css_loader.asp
