Circular Progress

Circular SVG Progress Indicator

A circular progress ring built with SVG that fills as the upload proceeds. The stroke-dashoffset property is animated to reflect progress.

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