js进度加载动画程序是本人的个人作品，写的不好，可以参考，但未经本人允许，请不要用于其它用途！
早上写了个首页进度加载动画，本想在我的博客里用上，测试发现博客园加载太快，根本看不到动画效果，直接就加载‘Complete'了，算了，还是不要把博客搞得太臃肿了！
于是我就写了个演示页面，在body里加了个iframe来加载大一点的网站，这样就看出效果了！
用Safari打开貌似CSS动画的播放时间变成同步了，不知道什么原因，本地测试又没问题（请大神指点！），用Chrome、Firefox倒是没问题，而IE我没测试过
加载时间统计我用了Windows对象的performance属性，它是专门用来来计算精确时间的方法，这是MDN关于的描述
本实例的实现原理比较简单，不过不是真正的按文件大小来显示加载进度的，只是在触发document.onreadystatechange事件时，根据document.readyState的状态来改变显示进度的。其实还有一种靠谱一点的方法，用XMLHttpRequest对象的实例的progress事件，，如：
rush:js;">
var request = new XMLHttpRequest();
request.onprogress = function (e) {
if(e.lengthComputable){ //lengthComputable是指文件是否有大小，值为true、false
progress.innerHTML = Math.round(100* e.loaded/ e.total) + \'%\'; //loaded、total表示已经加载的大小和总大小
}
}
用以上方法实现起来也挺麻烦，而且也不能实现100%的真实加载进度，所以我索性就假一点了，不用他了！
本实例还用到了document.styleSheets[0].insertRule()方法，这里有我对它的总结：
关于CSS动画的实现，大家自己看代码吧，很简单的代码，如果看的吃力，建议去补补CSS基础了，介绍个干货，，我表达能力有限，就不在这里嚼口舌了
下面是完整代码+演示：