フラスコを使ってプログレスバーを作成する方法は？

HTMLページに進捗バーを挿入したいだけです。私のapp.pyのforからロードする必要があります。それは私がフラスコを使ってプログレスバーを作成する方法は？

index.htmlを自分のコードにw3schoolsからブートストラッププログレスバーを使用してい

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)

app.py ...私がこれまでにやったことだ

<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

フラスコを使ってプログレスバーを作成する方法は？

答えて

関連する問題