虽然现在的GMail已经看不到这个效果，但之前那个可爱的深红色Loading仍然让许多人喜爱。我也将这款效果融入了我自己的WordPress主题TES中：
其实我的方法非常简单，也可以说没什么技术含量，甚至还不支持IE6，但据我长期的观察，确实非常实用的。Analytics的统计数据表明，加入了这一效果之后，用户的“平均停留时间”的确有所提高。可见，一个“正在加载”让许多用户都有更多的耐心等待，而不会因为屏幕空白太久而不耐烦地离开。
最近，又有不少朋友留言询问这个Loading的实现原理。这里我就分享一下：
首先，在页面的最上部输出一个Loading文字，比如“正在加载”，用div标签包含，并给它一个id，比如loading：
<body>正在加载你可以直接放到页面的<body>标签后面，亦可以用script.write输出（如果你有SEO洁癖的话）
然后，在你的样式表中，对这个loading设定一个简单的样式：
#loading{z-index:1;padding:5px 0 5px 9px; background:#c44;left:0;top:0;width:90px; color:#fff;position:fixed}接下来，在你<body>标签闭合之前，将这个loading隐藏掉就可以了。最简单的方法是输出一段<style>标记：
document.write('#loading{display:none}'); </body>如果你有jQuery之类的JavaScript库，就更方便了，例如jQuery可以使用：
$('#loading').hide()
</body>这样，当页面完全加载完毕之后，loading就隐掉了。
对于WordPress博客，如果你对页面代码没有太苛刻的洁癖，我个人建议把一些重量的JavaScript库都放到这段loading之后引入。这样在浏览器端，你的“Loading”会飞快地出现，用户会觉得你的服务器响应非常迅速。然而，如果你从各种不同的域名下先加载几百kb的JavaScript库，估计用户在你的“Loading”出现之前就已经关闭页面了。
最后，希望这个老土的技巧能帮到你：）
Advertisements
不错的效果，一会测试一下。
貌似用jQuery一句话就可以实现了！不过一直没试过！！
我的留言怎么没见了？！！
昨天换上的TES主题，嘿嘿~~
这个功能很好，我也加上了。
突然发现，这个theme的footer部分的按钮，the enhacning spring，好像有个typo……
很不错的效果，学习了~
一直没有问你这个怎么弄的，现在知道了：）
研究下怎么搞，估计要抄袭代码了
搞了，不懂html代码的难题就是，不知道怎么把字体改大点
font-size:**（如果你改得太大，背景也得调整了）
新版本theme将考虑加这个效果 哈哈…去计划下…
貌似不怎么难嘛~
我也要搞一个
先搞试验去。。。
很有用的效果。收藏了
收藏，感谢无私分享！
阿萨斯
很有创意的方法。：）
我试了一下，背景色没有出来，反正自己的页面还比较快，不用了。
依然感谢分享好方法
很好的用户体验！
IE6只需要把position:fixed改成position:absolute就行了
不过absolute不能随屏幕滚动，至少有个东西在最上面，总比啥都没有的好~
晕死
wp的blockquote标签让那代码后面的部分没有出来，调试了好久发现是代码不全
恩，多谢提醒，我来改改！
确实不错，已经加上了。
学习。。。
请问怎么样改才能像gmail那样居中呢？
知道了，加margin-left and margin-right:auto
感谢分享～！
prototype怎么弄？
“我个人建议把一些重量的JavaScript库都放到这段loading之后引入”
loading是在body里面的，js是在head里面引入的，怎么把js放到loading后面
删除head里面的js，放到body里面就可以了啊。
大多数情况下，我们引入Analytics的代码不就是放在最后么：）
原来是这样，我还以为只能在head里面引用js，thx for help
很好，收藏。
本来想用的。。。但是在这个页面长达5分钟的正在加载之后。、。。。我觉得还是不要用了
效果果然很不错！
实现方法很巧。
不错，效果很好，新浪的评论的载入条也是这样做的吧！
“ 正在加载 ”能不能放在body之前？
我的网站网速较慢，希望早一点加载进度提示。
测试将代码放在body之前，firefox显示正常，但IE7会影响CSS布局（三栏全部跑到了最左栏），不知如何解决？
楼主您好，其实您这样些会使得在某些图片被加载完之前，loading提示就消失了。我觉得应该用body的onload事件。我也写了篇类似的文章http://wubin.name/blog/display_a_message_while_loading.html。谢谢
没错，可是图片的加载往往会比较耗时间，我个人觉得loading显示太久也不太好。另外，用我这个方法甚至可以完全避开JavaScript（只要你在最后硬塞一个style标签就可以了）
总之，具体怎么用，仁者见仁，智者见智了：）
非常感谢。
很不错的效果
现在gmail那种蓝色进度条的显示效果怎么做，能不能也教程一下？：）
那种也行。不过对于非功能性页面，完全模仿GMail用一个进度条的loading，不合适。但也可以把进度条引入到loading中，我会考虑做一个：）
非功能性页面,对，你这个有点道理：）
突然发现，你的红底右下角是带圆角的，拷贝你的代码放在自己的上面怎么没有？
这是用了-moz-border-radius 属性，这个属性只对Firefox有效。
这段代码被我拷贝了，圆角很漂亮～！
这个效果能不能用在进入网站一开始就能出现，就是不要等到加载到body后才有，
在head里调用各种js也是要花点时间的
理论上，你可以一上来就输出一个div或者任何文字，但这显然会给你造成更多的麻烦，例如SEO、例如XHTML标准，更严重地，可能影响到浏览器的渲染和JavaScript的解释。
body之前加载的js可以放到body之后，不一定非要在head里面完成。尤其是jQuery（yui）和一些它的plugin、Prototype这些巨大的框架。
简单实用的技术，就是好技术！
方法使用了，但你的代码标点符号不是半角！希望能够改一改！
就是半角的啊……
剛想問，
你就自己公布了~
謝一個~
简单实用，最适合像俺这种懒人。。
谢了~
稍作改进后用上了~
为什么我照你这样做啦，没有任何你效果哈
wow，你的Loading升级了，都带有进度了……
人总是这么贪心，不知道这么进度怎么实现的。
#awlpercent 得添加很多个 呵呵
对你现在的进度效果很感兴趣，但是把你现在用的代码用上还是没法出现进度的效果，如果能更新下这篇文章说下新的方法就更好了XD
现在这个进度条貌似是在页面写了N多的awlpercent样式控制来实现的。
加入了这个，可是显示不了进度条！跟你页面这种进度条效果，有区别，一直以为自己加错了！后来看到大家也说没进度效果。能否写一个完整的，赠送给大家，谢谢！
要想加入进度条可就不能一行代码解决了哦。其实原理是一样的，在页面的不同位置“设点”，依次递增地设置某一个div的width属性就可以了。
试了几次都木有效果，orz,太无奈了
那能否在一个简单的页面，大家下载下来，研究一下呢？每次都来关注博主的很多好东西，这个既然大家都喜欢，为什么博客不在百忙之中，做一个在页面的不同位置“设点”，依次递增地设置某一个div的width。这种能实现进度条的效果的HTML送给大家学习？这不是很多喜爱博客期待的吗？
貌似稍微明白点AW的意思了，有功夫去自己先实验下
看到AW这里在顶部导航栏、侧边栏开始部分、侧边栏的收藏下面、ALEXA的上面以及底部的快速检索之前都有下面这样的代码XD
$(“#awlpercent”).css(“width”,”XXpx”);
不过我在自己的相对应的一些可能加载比较慢的DIV之前分别加入了这个代码，但FF下还是跟没加前一样….难道还少点啥？在去研究研究
真厉害，这都被你发现了 ^_^ 🙂
我认为用下面这句也许更好些（毕竟已经在用Jquery）：
$(“#awlpercent”).animate({width:”XXpx”})
动画看着够爽！
知道了原来自己没有JQUERY文件更没有调用它，加了下面这个后效果就出来了，当然也可以把文件下回去放自己空间里，我用的是GG的，改这么一个东西算是学习到了^_^
我的博客就剩下在微调下设点的位置就可以了，其他的朋友不会的自己查看下AW的源代码和CSS文件就可以整明白了，而且你只要打开他的网页源代码查找我上面说的那句代码就没剩下什么难的了
这个效果太棒了～收了收了～等放假了玩玩看～
难道说加了这个对SEO会有影响？怎么样影响呢？想学习一下。
进度条实现方法，被雷了下……
你们都是骗子
现在这种带进度条的loading效果是怎样实现的？
明白了，在页面不同位置分别加上
document.write(‘#awlpercent{width:XXpx}’);
就行了，可以不调用jQuery库
开始还以为是用字节数算出来的百分比……
做loading的话html没有ActionScript那么方便，sigh
要是有类似这样的插件就好了
试过，开始写的“正在加载…”显示为乱码，后改为”Loading”正常，不知这是怎么回事？
非常简洁、实用，赞！！
页面会错位啊，这是什么原因！
留言，文章不错！推荐博主去看一下“HotNewspro”这个主题的loading效果
dd
似乎不太管用呢。我的页面有数据库交互，所以比较慢，放上之后页面处于呆滞状态若干秒后。小红条闪了一下，页面也跟着出来了。没有起到预先提示的作用。
我还是不懂，初步接触html和js，css还完全不知道，能再详细一点说说么？谢谢
很喜欢这个，支持了