Create Progressbar in ASP.NET using jQuery.

jQuery UI provides a Progressbar widget to show the processing status during a wait time in an application. In this article, we will learn to create a Progressbar in ASP.NET.

Include an animated gif file progress-like-facebook.gif in the images folder in the project.

Add a new web form Recipe6.aspx to the current project.

Add an ASP.NET panel control for the progressbar as follows:

<asp:Panel id="progressbar" runat="server"></asp:Panel>

Define some basic css style for the above as follows:

#progressbar
{
width:300px;
height:22px;
}

The jQuery UI progressbar uses the jQuery UI CSS Framework for styling. Hence, to set the background of the progressbar to the animated gif file, add the following css style:

.ui-progressbar-value { background-image: url(images/progress-like-facebook.gif); }

Create another content panel that is initially hidden and displayed only after the progressbar loads completely.

<asp:Panel id="contentArea" runat="server">Page successfully loaded</asp:Panel>

We will use the following css class to hide this panel,

.hide
{
display:none;
}

Thus, the complete aspx markup of the form is as follows:

<form id="form1" runat="server">
<div align="center">
<asp:Panel id="progressbar" runat="server"></asp:Panel>
<asp:Panel id="contentArea" runat="server">Page successfully
loaded</asp:Panel>
</div>
</form>

Now, we will look at the jQuery solution for applying the Progressbar widget to the ASP.NET panel.

Use the JavaScript timer function setInterval() to define the timeout interval and the callback function after each interval:

var id = setInterval(showprogress, 10);

The complete jQuery solution is a follows:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#contentArea").addClass("hide");
var cnt = 0;
var maxCnt = 100;
var id = setInterval(showprogress, 10);
function showprogress() {
if (cnt <= maxCnt) {
$("#progressbar").progressbar({
value: cnt
});
cnt++;
}
else {
clearInterval(id);
$("#contentArea").removeClass("hide");
$("#progressbar").addClass("hide");
}
}
});
</script>