Archive

Posts Tagged ‘loading image’

Using Asp.net Ajax Update Progress

March 22, 2010 1 comment

Here in this article, we will learn how to use updateprogress control that comes asp.net ajax toolkit.

<asp:ScriptManager ID=”scriptManager” runat=”server” />

<asp:UpdatePanel ID=”UdpLogin” runat=”server”>
<ContentTemplate>

<div>

Content comes here…

</div>
</ContentTemplate>
</asp:UpdatePanel>

<asp:Panel ID=”UpdateProgress” runat=”server” CssClass=”ProgressContent” Width=”100%”
Height=”100%”>
<asp:UpdateProgress ID=”UpdateProg” runat=”server” DisplayAfter=”1″ AssociatedUpdatePanelID=”UdpLogin”>
<ProgressTemplate>
<asp:Panel ID=”UpdatePro” runat=”server” CssClass=”Trans” Width=”100%” Height=”100%”>
<table width=”100%” height=”100%”>
<tr>
<td align=”center” valign=”middle” width=”100%” height=”100%”>
<asp:Image ID=”imgProg” runat=”server” ImageUrl=”~/img/loading.gif” AlternateText=”Updating ……”
ImageAlign=”Middle” />
</td>
</tr>
</table>
</asp:Panel>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>

Css Styles to include here are as follows:

/* StyleSheet for Update Progress */
.ProgressContent
{
font-family: verdana;
font-size: 11px;
color: #000000;
font-weight: normal;
text-decoration: none;
}

.Trans
{
background-color: White;
filter: alpha(opacity=70);
opacity: 0.7;
position: absolute;
left: 0px;
top: 0px;
}
.Progress
{
font-family: verdana;
font-size: x-small;
color: Green;
font-weight: bold;
text-decoration: none;
height: auto;
}

Please visit my previous article for downloading loading images:

https://pankajlalwani.wordpress.com/2009/05/30/download-ajax-loading-image/

Advertisements

Download Ajax Loading Image

May 30, 2009 1 comment

Since all the Ajax interactions happen behind the scenes asynchronously, the user doesn’t understand what’s going on: sometimes the user doesn’t need to know what’s going on (like when you are just reloading some data), but when he presses a button he needs to know that he did the right thing and that something is happening.

So we can show an “ajax loading image” when ajax process is going on..

You can generate these images from:

http://www.ajaxload.info/

You can also download from:

http://mentalized.net/activity-indicators/

Also you can search the google for ajax loading image and you will be able to see lots of images..

Categories: Ajax Tags: , ,