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.

About The Author

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.

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

About The Author

2 comments:

Labels