Works with any backend npm install Zero dependencies

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”.