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

Question

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

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

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

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

我想添加一个水平进度条，其宽度为100％，高度约为10像素，并且始终浮动在页面底部。

我不知道我怎么能做任何想法......或者我可以看看的例子

Answer 1

Fiddle

您可以使用div和10px height获取0% width。之后，您可以使用css transition 2秒钟，并将div的宽度增加到100％，它将显示为进度条。