Javascript 如何动态设置AJAX加载条的动画，直到它达到100%？

这是我上一个问题的后续问题。现在我想知道如何显示动画加载条/面板，如下所示：

我的意思是，一个实际的移动面板从0%到100%。我这里有一些代码来开始讨论。我正在实现一个教程加载从这个奇妙的

这段代码的问题是，当它达到100%并且不活动时，它在控制台中显示100%（显示从0到100的实际计数）

---

我在官方文档中没有看到任何

进度

功能，但我发现了以下代码：

---

我在官方文档中没有看到任何

进度

功能，但我发现了以下代码：

---

是的，他们的行为是一样的。它仍然只是显示我的100%，而不是动态计数@Shanshan很快问了一个问题，控制台可以呈现实时数据源吗？就像我们正在做的一样？是的，控制台一直在工作。我认为您的服务器没有发送响应的大小，因此无法计算进度。更多信息：我很确定它是可计算的。否则它将只记录加载…。是的，它们的行为相同。它仍然只是显示我的100%，而不是动态计数@Shanshan很快问了一个问题，控制台可以呈现实时数据源吗？就像我们正在做的一样？是的，控制台一直在工作。我认为您的服务器没有发送响应的大小，因此无法计算进度。更多信息：我很确定它是可计算的。否则它将只记录加载…。据我所知，Ajax进度仅适用于实际数据传输，其中有足够多的字节可以传输，而进度指示器对于上载或下载时间是有意义的。进度事件不包括来自服务器的ajax响应时间。假设我有一个计数为5秒的函数，当计时器达到5秒时，我如何同步时间和进度条以达到100%？据我所知，Ajax进度仅适用于实际数据传输，其中有足够多的字节可以传输，因此进度指示器对于上传或下载时间是有意义的。进度事件不包括来自服务器的ajax响应的时间。假设我有一个计数为5秒的函数，当计时器达到5秒时，我如何同步时间和进度条以达到100%呢？

    $("#connection").click(function(e) {
        e.preventDefault();
        //show_loading();
        $.ajax({
            url: "./home/connect",
            type: 'GET',
            dataType: 'json', 
            progress: function(jqXHR, progressEvent) {
                if (progressEvent.lengthComputable) {
                    console.log("Loaded " + (Math.round(progressEvent.loaded / progressEvent.total * 100)) + "%");
                } else {
                    console.log("Loading...");
                }
            },
            success : function(data) {
                //hide_loading();
                Materialize.toast(data.db_connect, 4000, 'rounded green');
            },
        });
    });

$.ajax({
    url: path,
    xhrFields: {
        onprogress: function (e) {
            if (e.lengthComputable) {
                console.log(e.loaded / e.total * 100 + '%');
            }
        }
    },
    success: function (response) {

    }
});