I am using UpdateProgress to let the user know that system is processing. However, what is happening is that the waiting screen is showing on the FireFox browser but the waiting gif image is keeping static (Not animated) as shown in the attached sample picture. Where is the problem behind this picture shown static whereas when opened as alone image file, its animating?
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="false" CodeFile="MainMenu.aspx.vb" Inherits="FollowingUpContentPages_MainMenu" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"><style type="text/css">
.PanelStyle
{
margin-top:0px;
Background-Color:#DFDFDF;
Border-Color:Black;
Border-Style:Solid;
Height:290px;
Width:600px;
background: rgb(219, 219, 219);
background: rgb(219, 219, 219);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
/*background-image: -moz-linear-gradient(top, #dfdfdf, #ffffff);*/
}
.PanelTableStyle
{
width:100%;
height: 220px;
}
.PanelTableStyleA
{
width:100%;
height: 60px;
}
.PanelRowStyle
{
width:700px;
height:55px;
}
.Buttonout
{
background-color:#E8E8E8;
cursor:default;
}
.Buttonhover
{
background-color:#BFBFBF;
cursor:pointer;
}
.RowHeightStyle
{
height: 35px;
}
.auto-style12 {
height: 47px;
}
#overlay
{
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
background-color: #f8f8f8;
width: 100%;
height: 100%;
filter: Alpha(Opacity=90);
opacity: 0.9;
-moz-opacity: 0.9;
}
#theprogress
{
background-color: #fff;
border:1px none #ccc;
padding:10px;
width: 300px;
height: 30px;
line-height:30px;
text-align: center;
filter: Alpha(Opacity=100);
opacity: 1;
-moz-opacity: 1;
}
#modalprogress
{
position: absolute;
top: 40%;
left: 50%;
margin: -11px 0 0 -150px;
color: #990000;
font-weight:bold;
font-size:28px;
font-family:SC_AMEEN;
}
</style></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="CpMainContent" Runat="Server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:Panel ID="Panel1" runat="server" CssClass="PanelStyle" ><table id="PanelTableA" runat="server" class="PanelTableStyleA" ><tr class="PanelRowStyle" style="width:700px;" ><td align="center" class="RowHeightStyle" ><asp:Button ID="NewPost" runat="server" Text="رسالة جديدة"
BorderColor="Black" Height="50px"
style="font-size: 32px; margin-top:11px; font-family: SC_AMEEN;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;"
Width="250px" onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'" /></td></tr></table><table id="PanelTable" runat="server" class="PanelTableStyle" ><tr class="PanelRowStyle" ><td align="center" class="auto-style12"><asp:Button ID="Pending" runat="server" BorderColor="Black" Height="50px"
style="font-size: 32px; margin-top:1px; font-family: SC_AMEEN; margin-left: 2px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Text="قوائم المهام و الردود"
Width="250px" onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'" /><asp:Button ID="FollowUp" runat="server" BorderColor="Black" Height="50px" onMouseOut="this.className='Buttonout'" onMouseOver="this.className='Buttonhover'" style="font-size: 32px; margin-top:1px; font-family: SC_AMEEN; margin-left: 28px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Text="متابعــــة" Width="250px" /></td></tr><tr class="PanelRowStyle" ><td align="center" class="RowHeightStyle"><asp:Button ID="Searching" runat="server" BorderColor="Black" Height="50px"
style="font-size: 32px;margin-top:5px; font-family: SC_AMEEN; margin-left: 2px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;"
Width="250px" Text="البحث - الوارد - الصادر" onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'"/><asp:Button ID="Authorization" runat="server" BorderColor="Black" Height="50px" onMouseOut="this.className='Buttonout'" onMouseOver="this.className='Buttonhover'" style="font-size: 32px;margin-top:0px; font-family: SC_AMEEN; margin-left: 28px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Text="التفويض" Width="250px" /></td></tr><tr class="PanelRowStyle" ><td align="center" class="RowHeightStyle"><asp:Button ID="ExternalEntities" runat="server" BorderColor="Black" Height="50px"
style="font-size: 32px;margin-top:5px; font-family: SC_AMEEN; margin-left: 2px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;"
Width="250px" Text="الجهات الخارجية" onMouseOver="this.className='Buttonhover'" onMouseOut="this.className='Buttonout'" /><asp:Button ID="Structuring" runat="server" BorderColor="Black" Height="50px" onMouseOut="this.className='Buttonout'" onMouseOver="this.className='Buttonhover'" style="font-size: 32px;margin-top:0px; font-family: SC_AMEEN; margin-left: 28px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;" Text="الهيكلة" Width="250px" /></td></tr></table></asp:Panel></ContentTemplate></asp:UpdatePanel><asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true"><ProgressTemplate><div id="overlay"><div id="modalprogress"><div id="theprogress"><asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/images/WaitingImage.gif" Height="100px" Width="100px" /><br />PLEASE WAIT...</div></div></div></ProgressTemplate></asp:UpdateProgress></asp:Content>The screen behavior as showing at running time:
So what is the changes I should make so I can have the animating picture?