Simple ajax loader en javascript

 01/01/2019 |   Admin |  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>

 

Pour déclencher l'évnnement vous pouvez utiliser le bouton btnProcess associé au "OnClick"
Pour télécharger une image "AjaxLoader" vous pouvez aller sur ce site : http://ajaxload.info