Display jQuery Progress Bar for assigned Time Duration using jQuery in ASP.Net

Last Reply on Oct 17, 2017 01:53 AM By dharmendr

Posted on Oct 16, 2017 04:31 AM

Hello Everyone,

I'm using Jquery progress bar. I want to show the progress bar for the time durtion which I'll assign to get from the hiddenfield value. Can you please look into my issue. 

The aspx page which is shared displays the progress bar from 0-100% static, but i need to display the progress bar for the time defined by the <asp:HiddenField > value.

Suppose if I assigned the <asp:HiddenField > Value=30 the progress bar runs for the 30 mins time duration.

Thanks in advance.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="v3_dash.aspx.cs" Inherits="v3_dash" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<%--<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>--%>

<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Custom Label</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
    $(function () {

        var myHidden = document.getElementById('<%=Hidden1.ClientID%>').value; //I want to show for 30 Mins

        var progressbar = $("#progressbar"),
progressLabel = $(".progress-label");
      
        progressbar.progressbar({
            value: false,
            change: function () {
                progressLabel.text(progressbar.progressbar("value") + "%");
            },
            complete: function () {
                progressLabel.text("Complete!");
            }
        });

        function progress() {
            var val = progressbar.progressbar("value") || 0;

            progressbar.progressbar("value", val + 1);

            if (val < 99) {
                setTimeout(progress, 100);
            }
        }

        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">
 <asp:HiddenField ID="Hidden1" Value="30" runat="server" />
</form>
</div>
</body>
</html>
Posted on Oct 17, 2017 01:53 AM Modified on 9 days ago

Hi irshad1231,

Refer 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: 4px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
        }
    </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("Complete!"); }
            });
            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.5" />
    </form>
</body>
</html>

Demo