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.

More Related Contents:

  1. Sending data from HTML form to a Python script in Flask
  2. Post values from an HTML form and access them in a Flask view
  3. Application not picking up .css file (flask/python) [duplicate]
  4. Passing a matplotlib figure to HTML (flask)
  5. How to render by Vue instead of Jinja
  6. Getting value from select tag using flask
  7. How to generate an html directory list using Python
  8. Flask css not updating [closed]
  9. python flask display image on a html page [duplicate]
  10. Converting matplotlib png to base64 for viewing in html template
  11. Flask raises TemplateNotFound error even though template file exists
  12. Reference template variable within Jinja expression
  13. Is the server bundled with Flask safe to use in production?
  14. Checking if element exists with Python Selenium
  15. Handle Flask requests concurrently with threaded=True
  16. Make a POST request while redirecting in flask
  17. redirect while passing arguments
  18. What is the purpose of Flask’s context stacks?
  19. Is there a built in package to parse html into dom?
  20. Flask and uWSGI – unable to load app 0 (mountpoint=”) (callable not found or import error)
  21. RuntimeError: working outside of application context
  22. How can I get text of an element in Selenium WebDriver, without including child element text?
  23. Change the color of text within a pandas dataframe html table python using styles and css
  24. How to find tag with particular text with Beautiful Soup?
  25. Extending Flask class as main App
  26. Flask URL Route: Route Several URLs to the same function
  27. Flask(‘application’) versus Flask(__name__)
  28. Unable to “import matplotlib.pyplot as plt” in virtualenv
  29. How can we call one route from another route with parameters in Flask?
  30. Python string operation, extract text between html tags

Leave a Comment