用于正确显示进度条的 Jquery 增强代码

Question

我有运行良好的 jquery 代码，但存在一个问题，即 jquery xhr 请求完成并稍后加载数据，我希望进度条至少有 99% 的准确度，但它很快就会完成并且数据是加载太晚了

如何在其中添加文本，例如百分比，如果达到 98%，文本将更改为 key=sorted 和 almost done 和 loading results

我该怎么做

这是我的 JS 代码和 html 代码

lastly sit tight, we are showing results

HTML 代码

$("#btnUsers").click(function() {
    var form = $("#users");
    $.ajax({
        url: form.attr('data-action'),
        async: true,
        type: form.attr('data-method'),
        data: $("#users").serialize(),
        xhr: function () {
          $("#TrendingResultsNoShow").hide();
          $("#TrendingResults").hide();    
          var xhr = new window.XMLHttpRequest();
            //Upload Progress
            xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
            var percentComplete = (evt.loaded / evt.total) * 100; $('div.progress > div.progress-bar').css({ "width": percentComplete + "%" }); } }, false);
            //Download progress
            xhr.addEventListener("progress", function (evt) {
         if (evt.lengthComputable){ 
            var percentComplete = (evt.loaded / evt.total) *100;
                $("div.progress > div.progress-bar").css({ "width": percentComplete + "%" }); 
            } 
        },false);
            return xhr;
        },
        success: function(data) {
            $("#TrendingResultsNoShow").hide();
            $('.progress-bar').animate({width: "100%"}, 100);
            setTimeout(function(){
                $('.progress-bar').css({width: "100%"});
                setTimeout(function(){
                    $('#TrendingResults').html(data);
                }, 100);
            }, 100);
        }
    });
});