Circular Progress

A circular ring progress indicator built with SVG, updated via onTaskProgress. The ring fills as the upload progresses.

var circumference = 2 * Math.PI * 52; // ~326.73
var fg = document.getElementById('circle-fg');
var label = document.getElementById('circle-label');

new MultipleUpload(document.getElementById('demo-circular'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onTaskProgress: function(task) {
 var offset = circumference - (task.progress / 100) * circumference;
 fg.style.strokeDashoffset = offset;
 label.textContent = Math.round(task.progress) + '%';
 },
 onComplete: function() {
 fg.style.strokeDashoffset = '0';
 label.textContent = '100%';
 }
});