Javascript doesn't fetch progress data from python

Question

I've been trying to implement a progress bar for a user to track how far along my code is. I've been doing it like this:

global_progress = 0.0

def update_progress(progress):
    global global_progress
    global_progress = progress

@app.route('/progress')
def progress():
    return jsonify(progress=global_progress)

Then I'd place update_progress(0.25) but appropriately modified at various points of my other function. And the javascript is supposed to fetch the progress data to update the bar.

function updateProgressBar(progress) {
    var progressBar = document.getElementById('progress-bar');
    
    progressBar.style.setProperty('--width', progress * 100 + '%');
}

function checkProgress() {
    // Fetch progress from the server
    fetch('http://127.0.0.1:5000/progress')
      .then(response => response.json())
      .then(data => {
        updateProgressBar(data.progress);
        
        setTimeout(checkProgress, 1000);
      })
      .catch(error => console.error('Error fetching progress:', error));
}

checkProgress();

But the bar doesn't change when pass an image into the code. I'm wondering what I'm doing wrong?

Last time I was wondering if the problem was that I didn't set up my Flask folder properly, but I've checked it since so now I'm not sure. I've made sure that the progress data does indeed get passed on and changes value, so I think that problem is that my javascript code can't fetch it?