<%@ Page Title="Circular Progress" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Circular Progress - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Circular Progress</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Circular SVG Progress Indicator</div> <div class="demo-card-body"> <p class="demo-description"> A circular progress ring built with SVG that fills as the upload proceeds.
 The stroke-dashoffset property is animated to reflect progress.
 </p> <div class="demo-expect"><strong>What you should see:</strong> a ring instead of a bar, filling to 100% - same events, different rendering. One file at a time.</div> <style> .circle-progress-wrap {
 display: flex; align-items: center; gap: 1.5rem;
 margin-top: 1rem;
 }
 .circle-progress-wrap svg { transform: rotate(-90deg); }
 .circle-track { fill: none; stroke: #e5e7eb; stroke-width: 6; }
 .circle-fill {
 fill: none; stroke: #3b82f6; stroke-width: 6;
 stroke-linecap: round;
 transition: stroke-dashoffset 0.25s ease;
 }
 .circle-text {
 font-size: 0.85rem; font-weight: 700; fill: #1e293b;
 dominant-baseline: central; text-anchor: middle;
 transform: rotate(90deg);
 transform-origin: 50% 50%;
 }
 </style> <div class="circle-progress-wrap"> <svg width="80" height="80" viewBox="0 0 80 80"> <circle class="circle-track" cx="40" cy="40" r="34" /> <circle id="circFill" class="circle-fill" cx="40" cy="40" r="34"
 stroke-dasharray="213.6" stroke-dashoffset="213.6" /> <text class="circle-text" x="40" y="40" id="circText">0%</text> </svg> <div id="circUploader"></div> </div> <div class="code-panel"> <pre><code>&lt;svg width="80" height="80"&gt;
 &lt;circle class="track" cx="40" cy="40" r="34" /&gt;
 &lt;circle id="fill" cx="40" cy="40" r="34"
 stroke-dasharray="213.6" stroke-dashoffset="213.6" /&gt;
 &lt;text id="text" x="40" y="40"&gt;0%&lt;/text&gt;
&lt;/svg&gt;

onTaskProgress: function(task, pct) {
 pct = clampPercent(pct);
 var offset = circumference - (circumference * pct / 100);
 fill.setAttribute('stroke-dashoffset', offset);
 text.textContent = pct + '%';
}</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var fill = document.getElementById('circFill');
 var text = document.getElementById('circText');
 var host = document.getElementById('circUploader');
 var circumference = 2 * Math.PI * 34;
 function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }

 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 autoUpload: true,
 onTaskProgress: function (task, pct) {
 pct = clampPercent(pct);
 var offset = circumference - (circumference * pct / 100);
 if (fill) fill.setAttribute('stroke-dashoffset', offset);
 if (text) text.textContent = pct + '%';
 },
 onTaskComplete: function () {
 if (fill) fill.setAttribute('stroke-dashoffset', '0');
 if (text) text.textContent = '100%';
 }
 });
 })();
</script>
</asp:Content>
