Percentage Display
Show upload progress as a numeric percentage alongside the progress bar. Clear, precise feedback for users.
What you should see: the numeric percentage alongside the bar, shown both from the built-in progress display and from a hand-rolled readout, so you can compare the two approaches.
Drag & drop files here, or paste from clipboard
Custom Percentage via JavaScript
<!-- Built-in progress with percentage -->
<core-upload asp-upload-url="/api/upload/upload"
asp-progress="true"
asp-auto-upload="true">
</core-upload>
<!-- Custom percentage display -->
<div id="my-uploader"></div>
<div id="my-bar"></div>
<span id="my-pct">0%</span>
<script>
CoreUpload.create('#my-uploader', {
uploadUrl: '/api/upload/upload',
autoUpload: true,
onTaskProgress: function(file, percent) {
document.getElementById('my-bar').style.width = percent + '%';
document.getElementById('my-pct').textContent = Math.round(percent) + '%';
}
});
</script>A number rather than a bar
The progress callback gives you the percentage; rendering it as text is sometimes clearer than a bar, particularly in a dense layout or a table where a bar would not fit.
A number alone can look frozen
A percentage is precise and, on a slow upload, unhelpfully static — 34% for ninety seconds looks identical to a stall. Pair it with a transfer rate or a subtle animation so there is something visibly alive while the number is not moving.