progress bar by time

HTML

<div id="loading" class="col-sm-12" style="text-align: center; margin-bottom: 20px; height: 50px !important;" v-if="identifier == true">
    <span id="" style="font-size: 32px; color: black;">Loading, please wait...</span><img id="" style="height: 100%" src="/img/loading_input_manual.gif" alt="Loading" />
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>

JS

function simpanUbah(){
    $('#loading').css('display', 'block');

    startProgressBar();

    const interval = 1000;
    let progress = 0;
    const maxProgress = 100;
    const increment = 1;

    const progressInterval = setInterval(function() {
        progressBarFunction(progress, maxProgress, increment);
        progress += increment;
        if (progress >= maxProgress) {
            clearInterval(progressInterval);
        }
    }, interval);
}
function startProgressBar() {
    const progressBar = $('.progress-bar');
    progressBar.css('width', '0%');
    progressBar.attr('aria-valuenow', 0);
}
function progressBarFunction(progress, maxProgress, increment) {
    const progressBar = $('.progress-bar');
    progressBar.css('width', progress + '%');
    progressBar.attr('aria-valuenow', progress);
}