前端：迁移数据时，点击提交后跳出迁移中动画，数据提交完成时，显示进度条到100%，请问如何实现

Question

现在用的是jquery和bootstrap，想要实现点击提交后，开始跳出进度动画，同时发送后台数据，在数据发送完成时，动画进度条到达100%，请问如何实现？
以下是我自己写的代码，第一个是setTimeout的，但是这种自己感觉效果不好，感觉进度条是虚伪的，而且在数据提交时间不确定的情况下动画可能加载不完整
第二个是用ajax写的，不知道写的对不对，但是依然是做不到动画与提交数据同时进行，同时结束
版本1
代码链接1
版本2
代码链接2
我写在jsfiddle里面的代码运行好像还有点问题，本地调试时能够跳转，但jsfiddle里面不能跳转，动画也有点问题，不知哪位大神能指点下
同时还请问如何调试本地的ajax请求？

Answer 1

监听 progress 事件, 配合小的 CSS transition 来做:
https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XML...

Answer 2

本地测试的话，可以用【nginx、phpstudy、nodejs】等等
我觉得可以用用phpstudy，配合w3school上的php教程，可以做出来一点简单的东西
当然有兴趣直接从nodejs也好

Answer 3

用Ajax的话可以

$.ajax({
    beforeSend: function(){
        // Handle the beforeSend event
    },
    complete: function(){
        // Handle the complete event
    }
})