<%@ 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.0 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>

        <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) {
  var offset = circumference - (circumference * pct / 100);
  fill.setAttribute('stroke-dashoffset', offset);
  text.textContent = Math.round(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 circumference = 2 * Math.PI * 34;

        AjaxUploader.create(document.getElementById('circUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: false,
            autoUpload: true,
            onTaskProgress: function (task, pct) {
                var offset = circumference - (circumference * pct / 100);
                fill.setAttribute('stroke-dashoffset', offset);
                text.textContent = Math.round(pct) + '%';
            },
            onTaskComplete: function () {
                fill.setAttribute('stroke-dashoffset', '0');
                text.textContent = '100%';
            }
        });
    })();
</script>
</asp:Content>
