前段時間客戶提了一個需求，要求給網站中某些功能添加進度條形式，因為某些功能查詢的數據量太大，經常會出現點擊Search按鈕，但是沒有任何反應的情況，會讓用戶以為網站掛掉了，導致投訴的事情發生，所以客戶要求必須要添加。
其實不論在網站中，或者是在APP中，添加動畫Loading進度條，這都是必須要去做的。我們在瀏覽網頁、玩游戲、或者在玩手機的時候，不可避免會遇到因為網絡差或者硬件差等等的原因，而要等待，而對這樣的等待，大多數人都是沒有耐心去等的，這時如何可以出現一個動畫Loading進度條，就可以大大緩解等待時的煩躁情緒，讓用戶可以明確、直觀的看到Loading的進度。
常見的Loading樣式有很多，比如：直線進度條、圓形進度條、旋轉進度條、Logo描邊形式的進度條、奔跑的形式等等。
我此次添加的Loading樣式，是比較常見的旋轉Loading樣式，效果如下：
（圖1：是我自己做的，網上的圖片顏色不太符合我的需求
圖2：在網站上實際顯示的效果，除了Loading樣式，還有一個遮蓋的效果）
具體實現的方式：
前台代碼：
1 //遮蓋層
2 <div id="divbase" class="ui-widget-overlay" style="z-index: 997; display: none;">
3 <iframe class="ui-widget-overlay" runat="server" id="iFameBase" style="z-index: 998;
4 display: none;">
5 </iframe>
6 </div>
7 //Loading部分
8 <div runat="server" id="divSK" style="position:absolute; left:36%; top:30%; width:30%; height:30%; z-index:999;display:none;">
9 <img runat="server" id="imgLoading" src="../Images/gif/CirclePoint.gif" />
10 </div>
CSS樣式：
1 /*
2 彈出小視窗下層的div,作遮蓋showdialog的效果,設定背景色,給透明度,可以看到主畫面的內容. 3 */
4 .ui-widget-overlay 5 { 6 position: absolute; 7 top: 0; 8 left: 0; 9 width: 100%; 10 height: 100%; 11 background-color: Gray; 12 opacity: .30; 13 filter: Alpha(Opacity=30); 14 }
后台處理（包含JS部分）：
1 //當點擊按鈕的時候（JS實現）
2 $(function() { 3 $("#btnQuery").click(function() { 4 $("#base").show(); 5 document.getElementById("divSK").style.display = ""; 6 }); 7 }); 8
9 //當按鈕事件處理完畢后（后台處理）
10 this.Page.ClientScript.RegisterStartupScript(this.GetType(), "DisplayDiv", "funDisplayDiv();", true); 11
12 //funDisplayDiv()（JS實現）
13 function funDisplayDiv(){ 14 $("#base").hide(); 15 document.getElementById("divSK").style.display = "none"; 16 }
以上是我本次添加實現的Loading樣式，當然還會有其它更多的實現樣式，后續有時間再繼續整理。
后續我也會把圖1Loading樣式，PS的制作方式整理出來。