title: How to create a progress bar using flask?
body: <p>Just want to insert a progress bar in my html page. It should load from a for in my app.py. That's what I did so far...</p>
  
  <p>app.py</p>
  
  <pre><code>from flask import Flask, render_template
  app = Flask(__name__)
  
  @app.route('/')
  def index():
      return render_template('index.html')
  
  @app.route('/progress')
  def ajax_index():
  
     for i in range(500):
        print("%d" % i)
        # I want to load this in a progress bar
  
  if __name__ == "__main__":
      app.run(debug=True)
  </code></pre>
  
  <p>I'm using a bootstrap progress-bar from <a href="http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp" rel="nofollow">w3schools</a> in my code</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
         &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
         &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
         &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
         &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
         &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
         &lt;script&gt;
              $(function () { 
                  $("#content").load("/progress"); 
              });
         &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
             &lt;h2&gt;Progress Bar With Label&lt;/h2&gt;
             &lt;div class="progress"&gt;
                &lt;div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%"&gt;&lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help, please?</p>