Display a ‘loading’ message while a time consuming function is executed in Flask
Add this to your index.html or js file (I'm assuming you have jQuery here, you could use standard javascript of course.):
<script type="text/javascript">// <![CDATA[ function loading(){ $("#loading").show(); $("#content").hide(); }// ]]></script>Add this to you html or css file:
div#loading { width: 35px; height: 35px; display: none; background: url(/static/loadingimage.gif) no-repeat; cursor: wait; }You can get an adequate GIF from http://www.ajaxload.info/. Download and put it into your static folder.
Then change your submission button to call above js function:
<input type="submit" name="anything_submit" value="Submit" onclick="loading();">and add in a loading and a content div to you base html file:
<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>Now when you click 'Submit', the js function should hide your content and display a loading GIF. This will display until your data is processed and flask loads the new page.
This can be done by using a div that contains a 'loading gif' image. When the submit button is clicked, the div is displayed using javascript.To implement this, you can take a look at this website: http://web.archive.org/web/20181023063601/http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page-loads-using-javascript-and-css/
I found the purely CSS-dependent loader very useful. It does not depend on external resources:
https://www.w3schools.com/howto/howto_css_loader.asp
