Display a responsive progress bar with percentage using JS and HTML

I am trying to display a Responsive Progress bar using JS and HTML in python flask application. Unfortunately I am not able to get the progress of JS call to server in percentage. I want the percentage of progress in front end, so that the user is able to view how much he or she needs to wait.

@app.route('/test')
def testindex():
    return render_template('layouts/loading.html')


@app.route('/process_data')
def process_data():
    return data_info_list

   here some time taking process like, get requests to some file urls, reading it's data and processing it. And at the end it will return data_info_list this to front end.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Progress Bar</title>
    <style>
        #progress-bar {
            width: 100%;
            background-color: #f3f3f3;
        }
        #progress {
            width: 0%;
            height: 30px;
            background-color: #4caf50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="progress-bar">
        <div id="progress">%</div>
    </div>
    <br>
    <button onclick="startProcess()">Start Process</button>

    <script>
        function startProcess() {
            

            $.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress here
                console.log(percentComplete);
            }
       }, false);

       xhr.addEventListener("progress", function(evt) {
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               //Do something with download progress
               console.log(percentComplete);
           }
       }, false);

       return xhr;
    },
    type: 'POST',
    url: "/process_data",
    data: {},
    success: function(data){
        //Do something on success
    }
});



        }
    </script>
</body>
</html>

This is what I have done till now. I am not getting any errors and not getting the progress percentage in console.

Solution

Modify your css to:

#progress {
            height: 30px;
            background-color: #4caf50;
            text-align: center;
            line-height: 30px;
            color: white;
            transition: width 0.3s ease-in-out;
        }

and then update your html&script to:

<body>
    <div id="progress-bar">
        <div id="progress" style="width: 0%;">0%</div>
    </div>
    <br>
    <button onclick="startProcess()">Start Process</button>

    <script>
        function startProcess() {
            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            var progressWidth = percentComplete * 100;
                            $('#progress').css('width', progressWidth + '%').text(progressWidth.toFixed(0) + '%');
                        }
                    }, false);

                    xhr.addEventListener("progress", function(evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            var progressWidth = percentComplete * 100;
                            $('#progress').css('width', progressWidth + '%').text(progressWidth.toFixed(0) + '%');
                        }
                    }, false);

                    return xhr;
                },
                type: 'POST',
                url: "/process_data",
                data: {},
                success: function(data){
                    // Do something on success
                }
            });
        }
    </script>
</body>

here, the xhr.upload.addEventListener("progress", ...) and xhr.addEventListener("progress", ...) event handlers, update the #progress div's width and text to reflect the progress percentage
use progressWidth.toFixed(0) + '%' to display the progress percentage as a whole number