如何动态设置AJAX加载栏的动画，直到达到100％？

Question

这是我之前的"How do I measure a loading time of an AJAX request and display a loading panel?"的后续问题。现在我想知道我将如何显示这样的动画加载栏/面板：

我的意思是实际移动面板从0％到100％。我在这里有一些代码来开始讨论。我正在通过这个精彩的site实现教程加载。

    $("#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');
            },
        });
    });

此代码存在的问题是，它在控制台中显示100％且达到100％并且不显示（显示实际计数从0到100）。

Answer 1

我在官方文档中看不到任何progress功能，但我发现此代码here：

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

    }
});