Circular Progress

Replace the linear progress bar with a circular progress indicator. Compact and visually distinctive.

What you should see: a ring instead of a bar, filling to 100%. Same progress events, different rendering; the cap is 50 MB.

Ready

<div id="my-uploader"></div>
<svg width="80" height="80" viewBox="0 0 80 80"> <circle cx="40" cy="40" r="34" fill="none" stroke="#e2e8f0" stroke-width="6" /> <circle id="ring" cx="40" cy="40" r="34" fill="none" stroke="#0891b2"
 stroke-width="6" stroke-dasharray="213.63" stroke-dashoffset="213.63"
 stroke-linecap="round" transform="rotate(-90 40 40)" /> <text id="pct" x="40" y="44" text-anchor="middle">0%</text>
</svg> 
<script>
var circumference = 2 * Math.PI * 34; // 213.63

CoreUpload.create('#my-uploader', {
 uploadUrl: '/api/upload/upload',
 autoUpload: true,
 onTaskProgress: function(file, percent) {
 var offset = circumference - (percent / 100) * circumference;
 document.getElementById('ring').style.strokeDashoffset = offset;
 document.getElementById('pct').textContent = Math.round(percent) + '%';
 },
 onTaskComplete: function(file) {
 document.getElementById('pct').textContent = '100%';
 }
});
</script>