jquery - 下载页面时显示水平进度条

Question

网站页面上的某些时间需要花费一些时间来下载，而用户不会注意到它...在某些情况下，如果用户单击附加了一些事件处理程序的按钮图像，则会破坏页面功能。

我可以使用下面的代码来显示使用图像或一些动画的加载效果。

$(window).bind("load", function() {
    $('#loading').fadeOut(2000);
});

例如这个link正在使用常见的加载图像文件来显示页面进度。

我想添加一个水平进度条，它的宽度为 100%，高度约为 10 像素，并且始终 float 在页面底部。

我不确定我该怎么做任何想法..或者我可以看的例子

Answer 1

Fiddle

您可以采用 div，10px 高度 和 0% 宽度。之后你可以使用 css transition 2 秒并将你的 div 的宽度增加到 100%，它会显示为一个进度条。