Simple ajax loader en javascript
Code Javascript
<script language="javascript" type="text/javascript"> function displayProgress() { var hdn = document.getElementById('<%=hdnStatus.ClientID%>'); var div = document.getElementById('<%=pnlBackGround.ClientID %>'); if (div !=null) { var feedback = document.getElementById('<%=divFeedback.ClientID%>'); if (hdn.value!=1) { feedback.innerHTML = "<img src='../Images/ajax-loader.gif'>Please wait...<br />"; div.style.display = "block"; setTimeout("displayProgress()", 1000); return true; } else { div.style.display = "none"; return true; } } else { return true; } } </script>
Style Css
.popup-div-background { position:absolute; top: 0; left: 0; background-color:#ccc; filter:alpha(opacity=90); opacity:0.9; height: 100%; width: 100%; min-height: 100%; min-width: 100% } .popup-div-front { background-color: #ffffff; color: black; width: 70%; text-align: left; vertical-align: middle; position: absolute; top: 5%; left: 15%; bottom:5%; font-weight:bold; padding: 10px 5px 5px 5px; font-family:Verdana; }
Partie cliente (aspx)
<div> <asp:Panel ID="pnlBackGround" runat="server" CssClass="popup-div-background" style="display:none;" > <div id="divFeedback" runat="server" class="popup-div-front"> <img src="../Images/ajax-loader.gif" border="0" /> Please wait...<br /> </div> </asp:Panel> <asp:Button ID="btnProcess" runat="server" Text="Process" OnClientClick="displayProgress()" /> <asp:HiddenField ID="hdnStatus" runat="server" Value="0" EnableViewState=false /> </div>