ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Display count down timer with circular progress bar using jQuery in ASP.Net<p>Hi <a class="username" rel="nauna"> nauna</a>,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;div&gt; &lt;asp:ScriptManager ID=&#34;ScriptManager1&#34; runat=&#34;server&#34; /&gt; &lt;asp:UpdatePanel runat=&#34;server&#34;&gt; &lt;ContentTemplate&gt; &lt;div style=&#34;text-align: center;&#34;&gt; &lt;div class=&#34;dvDays&#34; style=&#34;width: 100px; height: 100px; float: left&#34;&gt; &lt;asp:Label ID=&#34;lblDays&#34; runat=&#34;server&#34; /&gt;&lt;/div&gt; &lt;div class=&#34;dvHours&#34; style=&#34;width: 100px; height: 100px; float: left&#34;&gt; &lt;asp:Label ID=&#34;lblHours&#34; runat=&#34;server&#34; /&gt;&lt;/div&gt; &lt;div class=&#34;dvMinutes&#34; style=&#34;width: 100px; height: 100px; float: left&#34;&gt; &lt;asp:Label ID=&#34;lblMins&#34; runat=&#34;server&#34; /&gt;&lt;/div&gt; &lt;div class=&#34;dvSeconds&#34; style=&#34;width: 100px; height: 100px; float: left&#34;&gt; &lt;asp:Label ID=&#34;lblSecs&#34; runat=&#34;server&#34; Style=&#34;text-align: center&#34; /&gt;&lt;/div&gt; &lt;/div&gt; &lt;asp:Timer ID=&#34;timer&#34; runat=&#34;server&#34; Interval=&#34;1000&#34;&gt; &lt;/asp:Timer&gt; &lt;/ContentTemplate&gt; &lt;/asp:UpdatePanel&gt; &lt;/div&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;//www.shieldui.com/shared/components/latest/css/light-glow/all.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//www.shieldui.com/shared/components/latest/js/shieldui-all.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { TimeProgress(&#34;.dvDays&#34;, $(&#39;[id*=lblDays]&#39;).html(), &#39;&lt;br/&gt;Days&lt;h3&gt;{0:n1}&lt;/h3&gt;&#39;, 31); TimeProgress(&#34;.dvHours&#34;, $(&#39;[id*=lblHours]&#39;).html(), &#39;&lt;br/&gt;Hours&lt;h3&gt;{0:n1}&lt;/h3&gt;&#39;, 24); TimeProgress(&#34;.dvMinutes&#34;, $(&#39;[id*=lblMins]&#39;).html(), &#39;&lt;br/&gt;Minutes&lt;h3&gt;{0:n1}&lt;/h3&gt;&#39;, 60); TimeProgress(&#34;.dvSeconds&#34;, $(&#39;[id*=lblSecs]&#39;).html(), &#39;&lt;br/&gt;Seconds&lt;h3&gt;{0:n1}&lt;/h3&gt;&#39;, 60); }); function TimeProgress(element, val, htmlText, maximum) { $(element).shieldProgressBar({ min: 0, max: maximum, value: val, layout: &#34;circular&#34;, reversed: false, layoutOptions: { circular: { width: 10, borderWidth: 1, borderColor: &#34;#f0ad4e&#34;, color: &#34;#f0ad4e&#34;} }, 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(&#34;.dvDays&#34;, $(&#39;[id*=lblDays]&#39;).html(), &#39;&lt;br/&gt;Days&lt;h3&gt;{0:n1}&lt;/h3&gt;&#39;, 31); TimeProgress(&#34;.dvHours&#34;, $(&#39;[id*=lblHours]&#39;).html(), &#39;&lt;br/&gt;Hours&lt;h3&gt;{0:n1}&lt;/h3&gt;&#39;, 24); TimeProgress(&#34;.dvMinutes&#34;, $(&#39;[id*=lblMins]&#39;).html(), &#39;&lt;br/&gt;Minutes&lt;h3&gt;{0:n1}&lt;/h3&gt;&#39;, 60); TimeProgress(&#34;.dvSeconds&#34;, $(&#39;[id*=lblSecs]&#39;).html(), &#39;&lt;br/&gt;Seconds&lt;h3&gt;{0:n1}&lt;/h3&gt;&#39;, 60); } }); }; &lt;/script&gt;</pre> <p><strong><span style="text-decoration: underline;">C#</span></strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Columns.Add(&#34;EndDate&#34;, typeof(DateTime)); dt.Rows.Add(&#34;2018-10-28 17:00:34.943&#34;); DateTime startDate = DateTime.Now; DateTime endDate = Convert.ToDateTime(dt.Rows[0][&#34;EndDate&#34;].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, &#39;0&#39;); } public Time CalculateTimeDifference(DateTime startDate, DateTime endDate) { int days = 0; int hours = 0; int mins = 0; int secs = 0; if (endDate &gt; 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; } }</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://imgur.com/iGB1lRm.gif" alt="" width="431" height="181" /></p>https://www.aspforums.net:443/Threads/181054/Display-count-down-timer-with-circular-progress-bar-using-jQuery-in-ASPNet/https://www.aspforums.net:443/Threads/181054/Display-count-down-timer-with-circular-progress-bar-using-jQuery-in-ASPNet/Mon, 01 Oct 2018 03:50:06 GMT