-1

I'm looking to dynamically update JavaScript to increment a progress bar on my Flask html page. How would I go about this?

Snippet of my app.py

counter = 0

@app.route('/checking')
def checking():
    global counter
    --code here to run whilst incrementing--
    counter += 1
    pagename = 'Check Stat'
    return render_template('CheckStat.html', pagename=pagename, counter=counter)

JS contained within a custom.js which is called into the html page (via a layout)

 $(function() {
    var current_progress = {{counter}};
    var interval = setInterval(function() {
        current_progress += 10;
        $("#dynamic")
        .css("width", current_progress + "%")
        .attr("aria-valuenow", current_progress)
        .text(current_progress + "% Complete");
        if (current_progress >= 100)
            clearInterval(interval);
    }, 1000);
  });

Progress bar is then displayed on the HTML page:

<div class="progress">
        <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
          <span id="current-progress"></span>
        </div>
      </div>
ext32
  • 45
  • 7

1 Answers1

0

You would need to use either SSE, Websockets, or an ajax call to get the progress value.

A another way is simpy to refresh the progress bar in an iframe. See What’s the best way to reload / refresh an iframe?

user7296390
  • 160
  • 7