Circular Progress
A circular ring progress indicator built with SVG, updated via onTaskProgress. The ring fills as the upload progresses.
0%
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%';
}
});
A ring instead of a bar
onTaskProgress gives you the percentage; what you draw with it is open. A ring fits where a bar does not — over a thumbnail, inside a compact card, on a grid tile — and reads at a smaller size than a horizontal bar can.
Keep the number available
A ring shows proportion well and precision poorly. For a long upload people want the actual figure, so put the percentage in the middle or beside it — the ring answers “how far” at a glance and the number answers “how much longer”.