本文是蘇福的原創文章，轉載請注明出處：蘇福CNblog：http://www.cnblogs.com/susufufu/p/5871134.html
該程序是本人的個人作品，寫的不好，可以參考，但未經本人允許，請不要用於其它用途！
早上寫了個首頁進度加載動畫，本想在我的博客里用上，測試發現博客園加載太快，根本看不到動畫效果，直接就加載‘Complete’了，算了，還是不要把博客搞得太臃腫了！
於是我就寫了個演示頁面，在body里加了個iframe來加載大一點的網站，這樣就看出效果了！
用Safari打開貌似CSS動畫的播放時間變成同步了，不知道什么原因，本地測試又沒問題（請大神指點！），用Chrome、Firefox倒是沒問題，而IE我沒測試過
加載時間統計我用了Windows對象的performance屬性，它是專門用來來計算精確時間的方法，這是MDN關於performance屬性的描述
本實例的實現原理比較簡單，不過不是真正的按文件大小來顯示加載進度的，只是在觸發document.onreadystatechange事件時，根據document.readyState的狀態來改變顯示進度的。其實還有一種靠譜一點的方法，用XMLHttpRequest對象的實例的progress事件，詳細解讀XMLHttpRequest，如：
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()方法，這里有我對它的總結：用原生JS讀寫CSS樣式的方法總結
關於CSS動畫的實現，大家自己看代碼吧，很簡單的代碼，如果看的吃力，建議去補補CSS基礎了，介紹個干貨，CSS中文參考手冊網站，我表達能力有限，就不在這里嚼口舌了
下面是完整代碼+演示：