A circular progress ring built with SVG that fills as the upload proceeds.
The stroke-dashoffset property is animated to reflect progress.
What you should see: a ring instead of a bar, filling to 100% - same events, different rendering. One file at a time.
<svg width="80" height="80">
<circle class="track" cx="40" cy="40" r="34" />
<circle id="fill" cx="40" cy="40" r="34"
stroke-dasharray="213.6" stroke-dashoffset="213.6" />
<text id="text" x="40" y="40">0%</text>
</svg>
onTaskProgress: function(task, pct) {
pct = clampPercent(pct);
var offset = circumference - (circumference * pct / 100);
fill.setAttribute('stroke-dashoffset', offset);
text.textContent = pct + '%';
}