如何使用烧瓶创建进度条？

只是想在我的html页面插入一个进度条。它应该从我的app.py中的for加载。这就是我所做的那么远，如何使用烧瓶创建进度条？

app.py

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)

我在我的代码使用引导进度条从w3schools

的index.html

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

     <script> 
      $(function() { 
       $("#content").load("/progress"); 
      }); 
     </script> 

    </head> 
    <body> 
     <div class="container"> 
      <h2>Progress Bar With Label</h2> 
      <div class="progress"> 
       <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div> 
      </div> 
     </div> 
    </body> 
</html>

请帮忙吗？

来源

2016-05-30 Renzo Rodrigues

实际上你需要做一些事情，需要时间在一个单独的进程或后台线程，并把它存储任务进度，以便'/ progress'可以获取它。你在展示什么进展？ –

这是非常简单的：轮询您的API和更新进度条的宽度和valuenow直到完成：

var interval = setInterval(update_progress, 1000); 
function update_progress() { 
    $.get('/progress').done(function(n){ 
     n = n/5; // percent value 
     if (n == 100) { 
      clearInterval(interval); 
      callback(); // user defined 
     } 
     $('.progress-bar').animate({'width': n +'%'}).attr('aria-valuenow', n);  
    }).fail(function() { 
     clearInterval(interval); 
     displayerror(); // user defined 
    }); 
}

来源

2016-05-30 18:47:26 DRC

如何使用烧瓶创建进度条？

回答

相关问题