Loading Image is not showing

Question

<asp:UpdatePanel ID="UpdtBank" runat="server">
 <ContentTemplate>
 <div style="text-align:center;">
    <asp:UpdateProgress AssociatedUpdatePanelID="UpdtBank" id="updateProgress" DynamicLayout="true" runat="server">
        <ProgressTemplate>
            <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
                <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/img/ajax-loader.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    //My Code is Here
</div>

I have copy above code from the tutorial and stackoverflow answers, but image is not showing at all. Kindly help me i cant find my mistake

Answer 1

Try decreasing the time after which the ProgressTemplate is displayed. By default this is 5 seconds. This behaviour is controlled by the Property: DisplayAfter

Specify the number of milliseconds to elapse before showing the progress control, i.e 2000 if you wish to wait for 2 seconds

<asp:UpdateProgress DisplayAfter="2000" AssociatedUpdatePanelID="UpdtBank"
     id="updateProgress" DynamicLayout="true" runat="server" />

Answer 2

Put your asp:UpdateProgress out side to the asp:UpdatePanel - as below .

<asp:UpdatePanel ID="UpdtBank" runat="server">
 <ContentTemplate>
    <div style="text-align:center;">

    //My Code is Here
    </div>
  </ContentTemplate>
</asp:UpdatePanel >

 <asp:UpdateProgress AssociatedUpdatePanelID="UpdtBank" id="updateProgress" DynamicLayout="true" runat="server">
        <ProgressTemplate>
            <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
                <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/img/ajax-loader.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>