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

Question

I’m still relatively new to Flask, and a bit of a web noob in general, but I’ve had some good results so far. Right now I’ve got a form in which users enter a query, which i

Answer 1

Add this to your index.html or js file (I'm assuming you have jQuery here, you could use standard javascript of course.):

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:

and add in a loading and a content div to you base html file:

    

    

        
Type anything:
        

        

            
            
        
        

    
    

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.