利用ajax 的UpdateProgress來達到loading 圖示

摘要:利用ajax 的UpdateProgress來達到loading 圖示

####################   css 樣式   #########################

<style  type="text/css" >
.loading {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 30%;
    left: 45%;
    width: 110px;
    height: 117px;
    z-index: 10000;
    _display: none;
}

.item
{
  display: block;
    margin: 103px auto 0 auto;
    color: #195343;
    text-align: center;
    z-index: 10001;  
}

</style>

 

#######################   控制項  ################################

<asp:UpdatePanel ID="UpdatePanel1" runat="server">  
            <ContentTemplate>  
                 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="讀取" />  
             </ContentTemplate>  
         </asp:UpdatePanel>

 

   <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">  
             <ProgressTemplate>  
             <div  class="loading"  >
                <img  class="item" src="x/img/ajax-loader1.gif"  />   </div>
             </ProgressTemplate>  
       </asp:UpdateProgress>  
 

###################  cs 程式碼  ##########################

  protected void Button1_Click(object sender, EventArgs e)  
    {            System.Threading.Thread.Sleep(20000);     }  

 

 

 

 

loading圖示製作: http://ajaxload.info/#preview