Display count down timer with circular progress bar using jQuery in ASP.Net

Hi nauna,

Check this example. Now please take its reference and correct your code.

HTML

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div style="text-align: center;">
                <div class="dvDays" style="width: 100px; height: 100px; float: left">
                    <asp:Label ID="lblDays" runat="server" /></div>
                <div class="dvHours" style="width: 100px; height: 100px; float: left">
                    <asp:Label ID="lblHours" runat="server" /></div>
                <div class="dvMinutes" style="width: 100px; height: 100px; float: left">
                    <asp:Label ID="lblMins" runat="server" /></div>
                <div class="dvSeconds" style="width: 100px; height: 100px; float: left">
                    <asp:Label ID="lblSecs" runat="server" Style="text-align: center" /></div>
            </div>
            <asp:Timer ID="timer" runat="server" Interval="1000">
            </asp:Timer>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<link rel="stylesheet" type="text/css" href="//www.shieldui.com/shared/components/latest/css/light-glow/all.min.css" />
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script type="text/javascript">
    $(function () {
        TimeProgress(".dvDays", $('[id*=lblDays]').html(), '<br/>Days<h3>{0:n1}</h3>', 31);
        TimeProgress(".dvHours", $('[id*=lblHours]').html(), '<br/>Hours<h3>{0:n1}</h3>', 24);
        TimeProgress(".dvMinutes", $('[id*=lblMins]').html(), '<br/>Minutes<h3>{0:n1}</h3>', 60);
        TimeProgress(".dvSeconds", $('[id*=lblSecs]').html(), '<br/>Seconds<h3>{0:n1}</h3>', 60);
    });
    function TimeProgress(element, val, htmlText, maximum) {
        $(element).shieldProgressBar({
            min: 0,
            max: maximum,
            value: val,
            layout: "circular",
            reversed: false,
            layoutOptions: { circular: { width: 10, borderWidth: 1, borderColor: "#f0ad4e", color: "#f0ad4e"} },
            text: { enabled: true, template: htmlText }
        }).swidget();
    }
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                TimeProgress(".dvDays", $('[id*=lblDays]').html(), '<br/>Days<h3>{0:n1}</h3>', 31);
                TimeProgress(".dvHours", $('[id*=lblHours]').html(), '<br/>Hours<h3>{0:n1}</h3>', 24);
                TimeProgress(".dvMinutes", $('[id*=lblMins]').html(), '<br/>Minutes<h3>{0:n1}</h3>', 60);
                TimeProgress(".dvSeconds", $('[id*=lblSecs]').html(), '<br/>Seconds<h3>{0:n1}</h3>', 60);
            }
        });
    };
</script>

C#

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.Add("EndDate", typeof(DateTime));
    dt.Rows.Add("2018-10-28 17:00:34.943");
    DateTime startDate = DateTime.Now;
    DateTime endDate = Convert.ToDateTime(dt.Rows[0]["EndDate"].ToString());
    Time time = CalculateTimeDifference(startDate, endDate);
    lblDays.Text = time.Days.ToString();
    lblHours.Text = time.Hours.ToString();
    lblMins.Text = time.Mins.ToString();
    lblSecs.Text = time.Secs.ToString().PadLeft(2, '0');
}

public Time CalculateTimeDifference(DateTime startDate, DateTime endDate)
{
    int days = 0; int hours = 0; int mins = 0; int secs = 0;
    if (endDate > startDate)
    {
        days = (endDate - startDate).Days;
        hours = (endDate - startDate).Hours;
        mins = (endDate - startDate).Minutes;
        secs = (endDate - startDate).Seconds;
    }
    return new Time { Days = days, Hours = hours, Mins = mins, Secs = secs };
}

public class Time
{
    public int Days { get; set; }
    public int Hours { get; set; }
    public int Mins { get; set; }
    public int Secs { get; set; }
}

Screenshot