Flask App: Update Progress Bar While Function Runs

Updating progress bar with Flask

In display.html update your script tag:

<script>
        var source = new EventSource("/display_progress");
        source.onmessage = function (event) {
            $('.progress-bar').css('width', event.data + '%').attr('aria-valuenow',event.data);
            $('.progress-bar-label').text(event.data + '%');
            if (event.data == 100) {
                source.close()
            }
    }
</script>

How to create a progress bar using flask?

this is pretty simple: poll your api and update the progress bar width and valuenow until finished:

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

Related Topics