进度条使用javascript

Question

我想向用户显示处理栏。

问题陈述： - 用户有许多要批准的交易。当他多选择说10-20个交易并通过点击批准批准我必须通过AJAX发送每个数据，然后逐个处理它。然后，在我完成之后，我将必须向用户显示已处理所有交易的状态。

处理需要时间。我必须显示处理栏

Answer 1

我的建议是使用jQuery-ui progress bar。

计算您要进行的ajax请求数量，然后每次完成其中一个ajax请求时，您可以计算完成百分比并更新进度条。

这将设置您的进度条;

var progressbar = $("<div></div>").appendTo('body').progressbar({value: 0});

这会改变进度条的位置;

progressbar.progressbar('value', parseInt((completed_ajax_requests / total_ajax_requests) * 100));

Answer 2

让服务器使用已完成的百分比响应每个请求。然后更新矩形div的背景图像的背景位置，以匹配服务器在任何给定响应上返回的百分比。

Answer 3

使用CSS显示进度条，并在每次完成交易时以及在新交易开始之前更新宽度设置。

如果您使用任何Javascript客户端库，您可能会找到进度条功能的第三方插件，以便您更轻松地开发自己的。