Progressbar类似于gmail

Question

如何创建类似于gmail的进度条？我有一个名为display <div id="display"></div>的div，其中使用jquery $('#display').load('somepage.html');从外部页面获取内容，并使用.click（）事件激活此部分。所以我正在尝试的是在提取something.html以加载“显示”时，如何向<div id="display"></div>

添加进度条

Answer 1

我推荐jQueryUI Progress Bar。它们的动画版本与Gmail进度条的样式类似。您可以使用jQuery Theme Roller以与Gmail相同的方式为其设置外观。

不幸的是，jQuery.load没有为您提供已完成的百分比，因此您可以通过缓慢动画进度条完成以及在加载时执行完整回调来伪造知道总百分比的效果，那么您应该完成进度条动画。在调用.load（）之前启动慢动画，并确保动画足够慢，以便在页面完全加载之前完成假动画。

您可以使用some alternatives to .load()。我认为在您的情况下，您应该将进度拆分为多个.load()调用并为其分配任意百分比。例如，当第一个.load（）完成时，将进度条移动到25％，然后将第二个内容加载的50％移动，等等。

Answer 2

您可以使用http://api.jquery.com/jQuery.ajax/加载内容（而不是加载）并使用事件“beforeSend”和“success”来修改加载程序的CSS。

Answer 3

您可以使用the Bootstrap's progress bars作为样式。

在.load（）函数启动之前添加进度条。 jQuery-function load（）有一个可选的第二个参数（在加载页面后执行的一个函数）：在这个函数中，告诉页面再次删除你的进度条。

我希望它有所帮助...