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, ASP.NET Architecture MVP 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 has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

1 Response to "Display a Progress bar while loading content in a DIV using jQuery"
  1. Anonymous said...
    October 20, 2010 at 1:35 PM

    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

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions