Hi irshad1231,
Refer the below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<style type="text/css">
.ui-progressbar
{
position: relative;
}
.progress-label
{
position: absolute;
left: 50%;
top: 0px;
font-weight: bold;
color: Blue;
}
#progressbar
{
height: 8px;
}
.ui-widget
{
font-family: Verdana;
font-size: 8px;
}
</style>
<script type="text/javascript">
$(function () {
var myHidden = document.getElementById('Hidden1').value; //currently set for 30 secs for demo.
var progressbar = $("#progressbar"),
progressLabel = $(".progress-label");
progressbar.progressbar({
value: false,
change: function () { progressLabel.text(progressbar.progressbar("value") + "%"); },
complete: function () { progressLabel.text("100%"); }
});
function progress() {
var val = progressbar.progressbar("value") || 0;
progressbar.progressbar("value", val + 1);
if (val < 99) { setTimeout(progress, (parseFloat(myHidden) * 600)); }
}
setTimeout(progress, 0);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="progressbar">
<div class="progress-label">
Loading...</div>
</div>
<div class="demo-description">
</div>
<input type="hidden" name="Hidden1" id="Hidden1" value="0.1" />
</form>
</body>
</html>
Demo
