Bootstrap Progress Bar with Laravel 9 blade and Ajax

Hello,

I am trying to add a progress bar to my laravel project. What I want to do, is add a progress bar while I upload Information to an API and the API runs. I want a progress bar to run until I get a response from the API

I used Ajax and jQuery to handle the process but the issue currently is that the progress bar is not updating. i.e. the width is not updating to 25% ect..

here is my code with JS and blade

@extends("master")

@section('content1')
<br>
<div class="container">
    <form id="api_form" method="POST" action="{{ route('API.runAPIs') }}">
        @csrf
        <!-- fill in form information to send to API -->
        <a class="btn btn-secondary" href="{{url('Apis')}}">Cancel</a>
        <input class="btn btn-primary" name="submit" type="submit" value="Run APIs" form="api_form"/>
        <div class="progress" id="progressBar">
            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.js"></script>
<script>
     $(function () {
            $(document).ready(function () {
                $('#api_form').ajaxForm({
                    beforeSend: function () {
                        var percentage = '0';
                    },
                    uploadProgress: function (event, position, total, percentComplete) {
                        var percentage = percentComplete;
                        $('.progress .progress-bar').css("width", percentage+'%',  function() {
                          return $(this).attr("aria-valuenow", percentage) + "%";
                        })
                    },
                    complete: function (xhr) {
                        console.log('File has uploaded');
                    }
                });
            });
        });
</script>
@endsection

It looks like the 'uploadProgress' element is not working.

Is there a way I can make this work?

Is there another method to track the API progress so I can create the progress bar without refreshing the template?

Thank you in advance