Spring Boot & Thymeleaf: Updating a Bootstrap progress bar

I'm trying to make a progress bar on my webpage which will update as a Java algorithm runs on the backend. The idea is that as the algorithm runs, the progress bar will update accordingly. I have created a method which returns the progress of the algorithm as a percentage (an integer between 1 and 100). I would like to pass this value using Thymeleaf and update the progress bar on the webpage accordingly. I'm using Bootstrap for the progress bar. Here is the code I have so far

options.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" th:href="@{/css/common.css}" />
</head>
<body>

    <div th:insert="navbar.html"></div>

    <div class="container" id="maindiv" style="border-opacity: 1; border-left: double; border-right: double; border-left-color: #c0c0c8; border-right-color:#c0c0c8; width: 2500px; margin-bottom: -20px;" th:if="${download}">
        
        <div class="progress md-progress" style="height: 10px;">
            <div th:fragment="progress" id="progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="height: 10px;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

        <button type="submit" onclick="move()" class="btn btn-default" style="margin-top: 5px;">Generate Solution</button>
    </div>

    <hr>

    <script>
        var gpaSlider = document.getElementById("GPARange");
        var output = document.getElementById("value");
        output.innerHTML = gpaSlider.value;

        gpaSlider.oninput = function() {
            output.innerHTML = this.value;
        }
    </script>
    <script>
        function move() {
            var width = 1;
            var element = document.getElementById("progress");

            var identity = setInterval(jump, 800);
            function jump() {
                if (width >= 100) {
                    clearInterval(identity);
                } else {
                    width++;
                    element.style.width = width + '%';
                }
            }
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

The code I have here simply increments the progress bar by 1 every so often, using the "width" CSS tag to do so. I looked into how to do this, and it seems that Thymeleaf fragments are the best way to do it. Accordingly I made this function in my Controller. (The getProgress() is what returns the percentage)

SolutionController.java

@RequestMapping(value = "solution-progress", method= RequestMethod.GET)
    public String getProgress(ModelMap map) {
        if(choice.equals("Simulated Annealing")) {
            map.addAttribute("value", simulation.getProgress());
        }
        else if(choice.equals("Genetic Algorithms")) {
            map.addAttribute("value", genet.getProgress());
        }
        return "options :: progress";
    }

My question, then, is how can I utilise this function within options.html to update the progress bar? I've seen people using Ajax, and this thread seemed to be what I was looking for. However, I couldn't adapt that code to my own, which requires updating the CSS tag, rather than a Thymeleaf value. Ideally I would simply be able to replace width++ in the script with something like width = $.get("solutions-progress"); and have that controller function return an integer instead of a string. However, I'm unsure how this would work.