title: How to add a loading gif to the page when a function runs in the background in Flask?
body: <p>I have written a Flask app that displays a page with a button, when the user clicks on that button a Python function is called which does some processing (which usually takes about 2 minutes). After this processing is over, a new page opens displaying the results. Now I want to include a 'loading gif' that indicates the user that the processing is in progress. How do I do this? Here is an example of what my code looks like. </p>
  
  <p>app.py</p>
  
  <pre><code>from flask import Flask, render_template
   import time
  
   app = Flask(__name__)
  
   @app.route('/')
   def index():
       return render_template('index.html')
  
   @app.route('/result', methods=['POST'])
   def result():
       time.sleep(5) # indicates the time delay caused due to processing
       return render_template('result.html')
  
   if __name__ == '__main__':
       app.run(debug=True)
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;form method=post action="/result"&gt;
              &lt;input type=submit value='Start Processing' name='submit_btn'&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>result.html</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;h1&gt; Processing Done &lt;/h1&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>