有時候訪問網站，在加載的過程中經常會出現顯示加載進度的進度條，或者類似的一個旋轉的菊花圖。如果留心的話不難發現，那些進度條出現的加載進度數字幾乎每次都是那幾個數字，30% -> 50% -> 80%，這樣。這樣會極大提高用戶的體驗，既能告知用戶加載進度，讓等待過程不再那么無聊，又能防止用戶以為網站有問題而直接離開站點。但是這個進度條是怎么實現的呢？
一般在網絡情況不好的情況下，加載的首頁又比較大的時候就可以使用進度條或者一些有意思的動畫。一般的實現方式剛開始時給整個頁面加個蒙板層，將加載過程覆蓋在蒙板層下面（有可能很丑陋），然后在蒙板層上加個進度條或者旋轉的菊花。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>load</title> <style type="text/css"> .current a { font-size: 20px; } .over { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f5f5f5; opacity:0.5; z-index: 1000; } .layout { display: none; position: absolute; top: 40%; left: 40%; width: 20%; height: 20%; z-index: 1001; text-align:center; } </style> <script type="text/javascript"> function showLoading(){ document.getElementById("over").style.display = "block"; document.getElementById("layout").style.display = "block"; } </script> </head> <body> <div class="current"><a href="#" onclick="showLoading()">Loading</a></div> <div id="over" class="over"></div> <div id="layout" class="layout"><img src="http://images.cnblogs.com/cnblogs_com/qiuyan/477435/o_31.gif" /></div> </body> </html>
這段代碼簡單介紹了如何添加菊花圖，但是進度條的話怎么玩進度呢？可以用html5的progress標簽或者動態圖！
進度條無非就是多了一個控制進度顯示的模塊，那怎么控制呢？這個也很簡單，已加載內容 / 整體內容 * 100%；
但是問題來了，目前在文檔沒有加載完成之前誰都沒有辦法獲得要加載的文件大小。但是，還是有一個解決辦法。因為一般要加載的內容分區塊加載，比如頭部區域，主題內容、邊欄內容、注腳內容等。會有多個ajax去請求（一般不會全都用ajax，這里只是舉個例子），再比如，頭部區域的請求ajax完成了，就認為加載了30%，這個時候修改進度條進度或者給菊花圖換個數字，主題內容的請求ajax加載完了，就認為加載了80%，以此類推。這就是為什么網站的加載進度條一般只是顯示某幾個進度數字的原因！
<script type="text/javascript"> $(document).ready(function(){
.
. $.ajax({ url: "header", success: function(){ //進度條進度改為30% }});
.
.
. $.ajax({ url: "content", success: function(){ //進度條進度改為80% }}); }); </script>