Display a ‘loading’ message while a time consuming function is executed in Flask

by

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.

Leave a Comment

tech