Posts Tagged ‘ajax loading’

Display Loading Image Using Jquery Ajax Methods in

Often we need to display a loading indicator whenever an ajax request is done. To accomplish this you can look at the following code:

<script src=”" type="text/javascript"></script>

<script language="javascript">

$(document).ready(function() {
$("# btnGetName ").click(function() {
 type: "POST",
 url: “../Default.aspx/GetName",
 data: "{}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(msg) {
 $("# divName ").html(msg.d);
$("# loading ").ajaxStart(function() {
$("# loading ").ajaxStop(function() {
<form id="form1" runat="server">

 <div id="loading" align="center" style="padding-right: 25px; z-index: 3; padding-left: 25px;
 left: 45%; top: 45%; padding-bottom: 15px; padding-top: 15px; position: absolute;">
 <img alt="Loading..." id="ImgLoader" runat="server" src="loader.gif" />

 <div id="divName"></div><input id="btnGetName" type="button" value="Get Name" /></div>


Using Ajax Update Progress

March 22, 2010 1 comment

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

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

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


Content comes here…


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

Css Styles to include here are as follows:

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

background-color: White;
filter: alpha(opacity=70);
opacity: 0.7;
position: absolute;
left: 0px;
top: 0px;
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: