Wie erstellt man einen Fortschrittsbalken mit Kolben?

Ich möchte nur einen Fortschrittsbalken in meine HTML-Seite einfügen. Es sollte von einem für in meiner app.py geladen werden. Das ist, was ich bisher getan ...Wie erstellt man einen Fortschrittsbalken mit Kolben?

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)

Ich bin ein Bootstrap-Fortschrittsbalken aus w3schools in meinem Code

index.html mit

<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>

Irgendwelche Hilfe, bitte?

Quelle

2016-05-30 Renzo Rodrigues

Sie tun müssen, um tatsächlich etwas, das Zeit in einem separaten Prozess oder Hintergrund-Thread nimmt und hat es zum Shop Fortschritt der Aufgabe irgendwo, so dass "/ Fortschritt" kann es holen. Worüber zeigst du den Fortschritt? –

das ist ziemlich einfach: Ihre api abfragen und die Fortschrittsbalken Breite und valuenow aktualisieren, bis beendet:

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 
    }); 
}

Quelle

2016-05-30 18:47:26 DRC

Wie erstellt man einen Fortschrittsbalken mit Kolben?

Antwort

Verwandte Themen