Display a Progress bar while loading content in a DIV using jQuery

Sometime back, I had written an article on Loading pages in DIV using JQuery. A user mailed back asking if it was possible to display a progress bar while the DIV loads its content. Well yes it is possible as shown here:

<html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<
title>Display Progress</title>
<
script src="Scripts/jquery-1.3.2.js"
type="text/javascript"></script>
<
style type="text/css">
.divPage
{
width:300px;
height:200px;
}
</style>

<
script type="text/javascript">
$(document).ready(function() {
$("#imgProg").show();
$('#LoadPage').load('Default.aspx', function() {
$("#imgProg").hide();
});
});
</script>
</
head>
<
body>
<
form id="form1" runat="server">
<
div>
<
div id="LoadPage" class="divPage"></div>
<
img alt="Progress" src="progress.gif" id="imgProg"
visible="false" />
</
div>
</
form>
</
body>
</
html>



As shown above, we make use of the a gif image to display progress while the Default.aspx page loads. Observe that progress.gif is set to visible=false.



Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

1 comment:

Anonymous said...

The above answer does not answer the original question. They didn't ask how to show a loading icon--they asked how to show the load progress in a progressbar