Slow Upload Progress Lab
This demo keeps CoreUpload in real chunked-upload mode, then adds a small page-local delay between chunks so you can inspect beautiful progress bars on localhost without needing a slow network.
Queue and pacing controls
Drop files here, browse from disk, or generate sample payloads in the browser. The selected pacing profile applies when you start the queue.
Drop files to begin your progress test
Click anywhere in this panel to browse, or use one of the sample generators below for repeatable progress-bar checks.
Smaller chunks plus a larger delay make the animation easier to study. This pacing is simulated on the client side for QA and presentation work.
Overall progress blends the entire queue into one clean hero bar so you can validate timing, easing, and milestone states at a glance.
The ring gives you a second read on the same queue, which is helpful when comparing circular treatments against the main horizontal bar.
Per-file runway
Each card shows the same upload data in a more detailed presentation, including status, transfer rate, ETA, and a simple segment rail.
CoreUpload.create('#progressLabUploader', {
uploadUrl: '/api/upload/upload',
chunked: true,
chunkSize: 192 * 1024,
autoUpload: false,
browseButton: document.getElementById('progressBrowseButton'),
dropTarget: document.getElementById('progressDrop'),
headers: function () {
return { 'X-Demo-Chunk-Delay': String(currentDelayMs) };
},
onTaskProgress: function (task, percent) {
renderProgressState();
}
});