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

Question

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

我可以使用下面的代码通过图片或动画来展示加载效果。

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

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

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

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

Answer 1

Fiddle

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