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, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

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

awadh tharu said...

I like this post